Question

我正在尝试在我的网页上构建一个html5 / javascript mp3播放器，但该网站没有播放声音。我的index.html文件在根目录中有这首歌。为什么当我在mp3文件上播放时，它不播放？

继承我的代码：

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

Answer 1

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

创建HTML 5音频播放器

1 个答案: