Question

我有这个代码我正在使用我的网页播放音乐即时开发但我有问题如何嵌入或播放更多的一首歌..我想当人们访问我的网站，他们可以播放音乐。任何想法的人关于我如何修改这段代码??

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> Welcome to Groundswell </title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $("#play-bt").click(function(){
            $("#audio-player")[0].play();
            $("#message").text("Music started");
        })

        $("#pause-bt").click(function(){
            $("#audio-player")[0].pause();
            $("#message").text("Music paused");
        })

        $("#stop-bt").click(function(){
            $("#audio-player")[0].pause();
            $("#audio-player")[0].currentTime = 0;
            $("#message").text("Music Stopped");
        })
    })
</script>
</head>

<body>

<audio id="audio-player" name="audio-player" src="02 - Hillsong - Run.mp3"></audio>
<div id="message"></div>
<a id="play-bt" href="#">Play music</a> | <a id="pause-bt" href="#">Pause music</a> | <a id="stop-bt" href="#">Stop music</a>

</body>
</html>

Answer 1

在脚本部分，添加一个包含所有歌曲文件的数组，然后创建一个（或两个）动态设置音频元素的src的函数。

<script>
var songlist=['02 - Hillsong - Run.mp3','song2.mp3','song_n.mp3'];
var whichsong=0;
var playing=false;
$(document).ready(function(){
    $("#play-bt").click(function(){
        $("#audio-player")[0].play();
        playing=true;
        $("#message").text("Music started");
    })

    $("#pause-bt").click(function(){
        $("#audio-player")[0].pause();
        playing=false;
        $("#message").text("Music paused");
    })

    $("#stop-bt").click(function(){
        $("#audio-player")[0].pause();
        $("#audio-player")[0].currentTime = 0;
        playing=false;
        $("#message").text("Music Stopped");
    })

    $("#next-bt").click(function(){
       $("#audio-player")[0].pause();
       $("#audio-player")[0].src='';
       whichsong++;
       if(whichsong==songlist.length){whichsong=0;}
       $("#audio-player")[0].src=songlist[whichsong];
       if(playing){$("#audio-player")[0].play();}
    })
})
</script>

然后使用id="next-bt"为“下一步”添加另一个链接（您可以从这里找出如何制作上一个按钮）

Answer 2

只是一个想法，也许值得研究HTML5音频

http://www.w3schools.com/html5/html5_audio.asp

在我的网页上嵌入多首歌曲

2 个答案: