roc*_*rou 10 javascript html5 html5-audio
我想创建一个音频后台播放器,用户只能点击图像播放或停止播放.我无法创建或重新编写现有代码以制作播放列表,以便在上一个播放完成后自动播放下一首歌曲.我想在vanilla js中做到这一点.
以下是我到目前为止:https:
//jsfiddle.net/rockarou/ad8Lkkrj/
var imageTracker = 'playImage';
swapImage = function() {
var image = document.getElementById('swapImage');
if (imageTracker == 'playImage') {
image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_pause_01.png';
imageTracker = 'stopImage';
} else {
image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_play_01.png';
imageTracker = 'playImage';
}
};
var musicTracker = 'noMusic';
audioStatus = function() {
var music = document.getElementById('natureSounds');
if (musicTracker == 'noMusic') {
music.play();
musicTracker = 'playMusic';
} else {
music.pause();
musicTracker = 'noMusic';
}
};
小智 6
[这里是一个非普通的解决方案。] 我的播放列表由四首歌曲组成，它们被命名为 0.mp3、1.mp3、2.mp3 和 3.mp3。
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
</body>
<script>
var x = 0;
var music = document.getElementById("player");
$("#player").bind("ended", function(){
x=x+1;
music.src = x%4 + ".mp3";
music.load();
music.play();
});
</script>
</html>
播放列表无限重复。
这是触发下一首歌曲的技巧：
music.addEventListener('ended',function(){
//play next song
});
如何在同一音频标签上播放另一首歌曲：
music.pause();
music.src = "new url";
music.load();
music.play();
现在，这是html5中播放列表的一个酷示例，您可以同时加载每首歌曲，以防某些客户端（移动设备）在消耗流量时不满意，在下一个示例中，所有音频同时加载以具有从歌曲到歌曲的平稳过渡，加载歌曲：
//playing flag
var musicTracker = 'noMusic';
//playlist audios
var audios = [];
$(".song").each(function(){
var load = new Audio($(this).attr("url"));
load.load();
load.addEventListener('ended',function(){
forward();
});
audios.push(load);
});
//active track
var activeTrack = 0;
突出显示女巫的歌曲正在播放，有点jquery，是的，是的，我很懒，很懒：
var showPlaying = function()
{
var src = audios[activeTrack].src;
$(".song").removeClass("playing");
$("div[url='" + src + "']").addClass("playing");
};
注意：如果没有播放声音，请手动检查是否可以访问音频网址