Question

我在播放时遇到mp3文件播放问题。我正在尝试构建一个html5音频播放器，但该文件并没有播放。它非常令人沮丧所以请让我知道我的代码有什么问题：

的index.html

<!DOCTYPE html>
<html ng-app>

<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="javascript/main.js"></script>



</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>
            <br/>
            <input id="sliderTime" type="range" min="0" value="0" />
            <div id="musicList"></div>


            <script src="angular.min.js"></script>
            <script>
             angular.module('myModule', ['ui.bootstrap']);
                var player;
                var intv;
                var slider;


                window.onload = function () {

                    player = document.getElementById('player');
                    scrubber = document.getElementById('songScrubber');
                    scrubber.addEventListener('change', update(), false);
                }

                function update() {
                    player.currentTime = scrubber.value;
                }

                function playMusic() {
                    player.play();
                    document.getElementById('songLength').innerHTML = secsToMinsAndSecs(Math.round(player.duration));

                    myInterval = setInterval(function () {
                        document.getElementById('songPosition').innerHTML = secsToMinsAndSecs(Math.round(player.currentTime));
                        scrubber.max = player.duration;
                        scrubber.value = player.currentTime;
                    }, 100);
                }

                function pauseMusic() {
                    player.pause();
                    clearInterval(myInterval);

                }

                function stopMusic() {
                    player.plause();
                    player.currentTime = 0;
                    clearInterval(myInterval);
                }
            </script>
</body>

</html>


main.js


  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";
    }


function DropdownCtrl($scope) {
  $scope.items = [
    "The first choice!",
    "And another choice for you.",
    "but wait! A third!"
  ];
}

构建HTML5音频播放器

0 个答案: