Создание аудиоплеер HTML 5

Я пытаюсь создать mp3-плеер html5/javascript на моей веб-странице, но на сайте нет звука. У меня есть песня в корневом каталоге с моим файлом index.html. Почему, когда я нажимаю игру в mp3-файле, она не воспроизводится?Создание аудиоплеер HTML 5

Heres мой код:

index.html

<!DOCTYPE html> 
<html ng-app> 

<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> 
    <link href="menu_source/styles.css" rel="stylesheet" type="text/css"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" href="dist/css/bootstrap.min.css"> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
    <script src="music.js"></script> 
    <script> 
     var player; 
     var intv; 
     var slider; 

     window.onload = function() { 
      document.getElementById('btnPlay').addEventListener('click', playMusic, false); 
      document.getElementById('btnPause').addEventListener('click', btnPause, false); 
      document.getElementById('btnStop').addEventListener('click', btnStop, false); 
      document.getElementById('btnVolUp').addEventListener('click', , false); 
      document.getElementById('btnVolDown').addEventListener('click', volDown, false); 
      player = document.getElementById('player'); 
      slider = document.getElementById('sliderTime'); 
      slider.addEventListener('change', reposition, false); 
      getMusicList(); 
     } 

     function reposition() { 
      player.currentTime = slider.value; 
     } 

     //Volume Controls 
     function volUp() { 
      if (player.volume < 1) { 
       player.volume += 0.1; 
       console.log(player.volume); 
      } else { 
       player.volume = 1; 
      } 
     } 

     function volDown() { 
      if (player.volume > 0) { 
       player.volume -= 0.1; 
       console.log(player.volume); 
      } else { 
       player.volume = 0; 
      } 
     } 
     //MUSIC PLAY CONTROLS 

     function playMusic() { 
      player.play(); 
      intv = setInterval(update, 100); 
      slider.max = player.duration; 
     } 

     function update() { 
      document.getElementById('songTime').innerHTML = millisToMins(player.currentTime); 
      slider.value = player.currentTime; 
     } 

     function millisToMins(seconds) { 
      var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600)/60); 
      var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60; 
      if (numseconds >= 10) { 
       return "Time Elapsed: " + numminutes + ":" + Math.round(numseconds); 
      } else { 
       return "Time Elapsed:" + numminutes + ":0: + Math.round(numseconds); 
} 
} 
function pauseMusic(){ 
player.pause(); 
clearInterval(intv);l 

} 
function stopMusic(){ 
    player.pause(); 
    player.currentTime = 0; 
    clearInterval(intv); 
} 
function getMusicList(){ 
    var parser = new DOMParser(); 
    xmlDocument = parser.parseFromString(xml, " 
       text/xml "); 
    var elementsArray = xmlDocument.documentElement.getElementsByTagName('composition'); 
    var arrayLength = elementsArray.length; 
    var output = " <table> "; 
    for (var i = 0; i < arrayLength, i++){ 
     var title = elementsArray[i].getElementsByTagName('title'[0].firstChild.nodeValue; 
     var composer = elementsArray[i].getElementsByTagName('composer')[0].firstChild.nodeValue; 
     var time = elementsArray[i].getElementsByTagName('time')[0].firstChild.nodeValue; 
     var fileName = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue; 
     output += " <tr> "; 
     output += (" < td onclick = 'songSelect(\"" + fileName + "\")' > " + title + " 
       By: " + composer + " < /td>"); 
     output += "</table > "; 
     document.getElementById('musicList').innerHTML = output; 
} 
function songSelect(fn){ 
    //console.log(fn); 
    document.getElementById('player').src = fn; 
    playMusic(); 
} 
    </script> 
</head> 
<body> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div id="logo2"> 
       <div class="col-md-4"> 
        <div ng-controller="logOut"> 
         <div id="logOut1"> 
          <button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"> 
           Logout 
          </button> 
         </div> 
        </div> 
       </div> 
      </div> 
      <script> 
       angular.module('myModule', ['ui.bootstrap']); 
      </script> 
      <script src="angular.min.js"></script> 
      <div id="content2"> 
       <div id="audioPlayer"> 
        <audio id="player"> 
         <source src="SleepAway.mp3" /> 
         <source src="SleepAway.ogg" /> 
        </audio> 
        <button id="btnPlay">Play</button> 
        <button id="btnPause">Pause</button> 
        <button id="btnStop">Stop</button> 
        <button id="btnVolUp">Volume Up</button> 
        <button id="btnVolDown">Volume Down</button> 
        <span id="songTime"></span> 
        <br/> 
        <input id="sliderTime" type="range" min="0" value="0" /> 
        <div id="musicList"></div> 
       </div> 
</body> 
</html>

main.js

<script type="text/javascript"> 
    var audio = document.getElementById("player"), 
     play = document.getElementById("play"), 
     timer = document.getElementById("timer"), 
     update; 

    audio.addEventListener("click, PlayAudio, false); 
      play.addEventListener(" 
     click, PlayAudio, false); 

    //play or pause audio 
    functon PlayAudio(e) { 
     e.preventDefault(); 
     if (audio.paused) { 
      audio.play(); 
      play.textContent = "Pause"; 
     } else { 
      audio.pause(); 
      play.textContent = "Play"; 
     } 
    } 
    document.write("Hello World!"); 
</script>

источник

2014-01-26 user3159568

Обычно вы будете иметь больше шансов получить ответы, которые вы ищете , и получить их быстрее, сделав ваш код коротким и точным. Попробуйте удалить любой код, который напрямую не участвует в той части, где возникла ваша проблема, или попробуйте сделать упрощенный аналогичный код, который проявляет ту же проблему для вас. – Joeytje50

Это взломанная версия моего сайта. Я удалил все, кроме компонентов, в html5-плеер, который я пытаюсь создать, но, похоже, не работает. – user3159568

@ joeytje50 прав, здесь слишком много кода. Вы проверили консоль на наличие ошибок? Я вижу две синтаксические ошибки в вашем main.js. –

var player = document.createElement('audio'); 
player.src = 'your_source_here.mp3'; 
player.controls = true; 
document.body.appendChild(player);

источник

2014-01-26 00:41:44 neaumusic

Создание аудиоплеер HTML 5

ответ

Смежные вопросы