播放HTML5音頻播放器時出錯javascript

我試圖使用我的index.html文件播放位於我的根目錄中的mp3文件sleepAway.mp3，但沒有聲音。以下是我所知道的：sleepAway.mp3 GET方法根據此取消，其中還包括其他我得到的錯誤。點擊這裏查看我的錯誤：http://postimg.org/image/fjtc0jwff/ 這裏是我的代碼：播放HTML5音頻播放器時出錯javascript

的index.html

<!DOCTYPE html> 
<html ng-app ="plunker"> 

<head> 
    <title>app</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" rel="stylesheet" type="text/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 src="example.js"></script> 
    <script src="javascript/main.js"></script> 
      <script src="angular.min.js"></script> 
    <script> 
      angular.module('myModule', ['ui.bootstrap']); 
       var player; 
       var intv; 
       var slider; 


       window.onload = function() { 



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

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

       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; 
       } 
       } 
       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 pauseMusic() { 
        player.pause(); 
        clearInterval(intv); 

       } 

       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 stopMusic() { 
        player.plause(); 
        player.currentTime = 0; 
        clearInterval(myInterval); 
       } 
       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')[o].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 += "</tr>" 

       } 

       output += "</table>"; 
       document.getElementById('musicList').innerHTML = output; 
       } 

       function songSelect(fn) 
       { 
       document.getElementById('player').src = fn; 
       playMusic(); 
       } 

      </script> 
      <style> 
      #musicList td{ 
      border: 1px solid black; 
      padding:3px; 

      } 
      #musicList td:hover{ 
      background-color:#990000; 
      color:white; 
      } 
      </style> 

</head> 

<body> 



    <div id="content"> 

    </div> 
    <div id="content1"> 
     <div id="audioPlayer"> 
      <audio id="player"> 
       <source src="sleepAway.ogg" type="audio/ogg"> 
        <source src="sleepAway.mp3" type="audio/mpeg"> 
      </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> 

      <input id="sliderTime" type="range" min="0" value="0" /> 
      <div id="musicList"></div> 




</body> 


</html>

music.js

var xml='<?xml version="1.0"?>'; 
xml +='<music>'; 
xml +=' <composition>'; 
xml +=' <title>O Mio Babbino Caro</title>'; 
xml +=' <composer>Puccini</composer>'; 
xml +=' <time>2:12</time>'; 
xml +=' <filename>SleepAway.mp3</filename>'; 
xml +=' </composition>'; 
xml +=' <composition>'; 
xml +=' <title>2:57</time>'; 
xml +=' <filename>gershwin.mp3</filename>'; 
xml +=' </composition>'; 
xml +=' <composition>'; 
xml +=' <title>The Man I Love</title>'; 
xml +=' <composer>Gershwin</composer>'; 
xml +=' <time>2:57</time>'; 
xml +=' <filename>gershwin.mp3</filename>'; 
xml +=' </composition>'; 
xml +=' <composition>'; 
xml +=' <title>2:57</time>'; 
xml +=' <filename>gershwin.mp3</filename>'; 
xml +=' </composition>'; 
xml +=' <composition>'; 
xml +=' <titleAllegro</title>'; 
xml +=' <composer>Beethoven</composer>'; 
xml +=' <time>3:45</time>'; 
xml +=' <filename>piano.mp3</filename>'; 
xml +=' </composition>'; 
xml +=' <composition>';

來源

2014-01-29 user3159568

你加載角庫後你已經已經嘗試使用角碼。您需要將<script src="angular.js"></script>移至BEFORE，然後開始angular.module。

來源

2014-01-29 20:38:55

這真的有助於我打球時。現在時間已經過去了，但仍然沒有聲音，並且在GET方法中mp3文件被取消。我在第一篇文章中更新了代碼。 – user3159568

播放HTML5音頻播放器時出錯javascript

回答

相關問題