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

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

javascript html

Javascript 在我的网页上嵌入多首歌曲,javascript,html,Javascript,Html,我用这个代码在我的网页上播放音乐，但我在如何嵌入或播放多首歌曲方面遇到了问题。我希望当人们访问我的网站时，他们可以播放音乐。有人知道我如何修改这个代码吗 <?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"&

我用这个代码在我的网页上播放音乐，但我在如何嵌入或播放多首歌曲方面遇到了问题。我希望当人们访问我的网站时，他们可以播放音乐。有人知道我如何修改这个代码吗

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


欢迎来到Groundsweel
$（文档）.ready（函数（）{
$（“#播放bt”）。单击（函数（）{
$（“#音频播放器”）[0]。播放（）；
$（“#消息”）.text（“音乐开始”）；
})
$（“#暂停bt”）。单击（函数（）{
$（“#音频播放器”）[0]。暂停（）；
$（“#消息”）。文本（“音乐暂停”）；
})
$（“#停止bt”）。单击（函数（）{
$（“#音频播放器”）[0]。暂停（）；
$（“#音频播放器”）[0].currentTime=0；
$（“#消息”）。文本（“音乐停止”）；
})
})
|  |

在脚本部分，添加所有歌曲文件的数组，然后创建一个（或两个）函数，动态设置音频元素的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>


var-songlist=['02-Hillsong-Run.mp3'、'song2.mp3'、'song_n.mp3']；
var，其中Song=0；
var=false；
$（文档）.ready（函数（）{
$（“#播放bt”）。单击（函数（）{
$（“#音频播放器”）[0]。播放（）；
玩=真；
$（“#消息”）.text（“音乐开始”）；
})
$（“#暂停bt”）。单击（函数（）{
$（“#音频播放器”）[0]。暂停（）；
玩=假；
$（“#消息”）。文本（“音乐暂停”）；
})
$（“#停止bt”）。单击（函数（）{
$（“#音频播放器”）[0]。暂停（）；
$（“#音频播放器”）[0].currentTime=0；
玩=假；
$（“#消息”）。文本（“音乐停止”）；
})
$（“#下一个bt”）。单击（函数（）{
$（“#音频播放器”）[0]。暂停（）；
$（“#音频播放器”）[0].src=''；
whichsong++；
如果（whichsong==songlist.length）{whichsong=0；}
$（“#音频播放器”）[0].src=songlist[whichsong]；
如果（播放）{$（“#音频播放器”）[0]。播放（）；}
})
})

然后用

id=“Next bt”

为“Next”添加另一个链接（您可能可以从这里了解如何制作上一个按钮）

这只是一个想法，可能值得研究HTML5音频

您使用的是什么库？您能否不仅复制代码，而且使用不同的ID？那么我该如何删除音频标签？还是什么？保留它，这就是函数随后修改的内容。今天晚些时候我会添加到这个函数中，如果你没有让它正常工作，它现在应该可以工作了，只是缺少了一些优化…只需将你的歌曲标题放在这个数组中，如果有一个快照，请让我知道（我从常规JS到jQuery，这样它就可以匹配你拥有的其他内容）我试过了，但它不起作用也许我在音频标签上做错了这是它应该的方式吗？