播放HTML5音频播放器JavaScript时出错

Question

我正在尝试让根目录中的mp3文件sleepAway.mp3与index.html文件一起播放，但是没有声音。 这就是我所知道的：sleepAway.mp3根据此取消的GET方法，其中还包括我遇到的其他错误。 单击此处查看我的错误： http : //postimg.org/image/fjtc0jwff/这是我的代码：

的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>';

Answer 1

您已经尝试使用角度代码之后，正在加载角度库。 您需要将<script src="angular.js"></script>移到开始angular.module位置之前。