现成的网页MP3播放器JS,帮我修改成可自动连播的。

发布网友发布时间：2022-05-02 19:21

共2个回答

热心网友时间：2022-06-26 07:43

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create By JZSilence</title>
<style>
body { color: #666; font-family: sans-serif; line-height: 1.4; }
h1 { color: #444; font-size: 1.2em; padding: 14px 2px 12px; margin: 0px; }
h1 em { font-style: normal; color: #999; }
a { color: #888; text-decoration: none; }
#wrapper { width: 400px; margin: 40px auto; }

ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
li.playing a { color: #000; }
li.playing:before { content: '?'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }

#shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
#shortcuts div { width: 460px; margin: 0px auto; }
#shortcuts h1 { margin: 0px 0px 6px; }
#shortcuts p { margin: 0px 0px 18px; }
#shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
@media screen and (max-device-width: 480px) {
#wrapper { position: relative; left: -3%; }
#shortcuts { display: none; }
}
</style>
<script src="http://kolber.github.com/audiojs/demos/jquery.js"></script>
<script src="http://kolber.github.com/audiojs/audiojs/audio.js"></script>
<script>
function getUrlParam(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null)
return unescape(r[2]);
return null;
}
$(function() {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (next.length)
{
window.location.href=$(next).find("a").first().attr("title");
}
}
});

// Load in the first track
var audio = a[0];
var id=getUrlParam("p");
if(id!=null&&id!="")
{
$('ol li').each(function (i){
if($(this).attr("title")==id)
{
first = $(this).find("a").first().attr('data-src');
$(this).addClass('playing');
audio.load(first);
audio.play();
}
});
}
else
{
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
audio.play();
}
// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
//$(this).addClass('playing').siblings().removeClass('playing');
//audio.load($('a', this).attr('data-src'));
//audio.play();
window.location.href=$(this).find("a").first().attr("title");
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
// back arrow
} else if (unicode == 37) {
var prev = $('li.playing').prev();
if (!prev.length) prev = $('ol li').last();
prev.click();
// spacebar
} else if (unicode == 32) {
audio.playPause();
}
})
});
</script>
</head>
<body>
<div id="wrapper">
<h1>Create By JZSilence</h1>
<audio preload></audio>
<ol>
<li title="1"><a href="#" title="a.html?p=1" data-src="http://data7.5sing.com/T1m5YbBXET1R47IVrK.mp3">Someone Like You</a></li>
<li title="2"><a href="#" title="b.html?p=2" data-src="http://data3.5sing.com/T1n2EmByhT1R47IVrK.mp3">Tik Tok</a></li>
</ol>
</div>
<div id="shortcuts">
<div>
<h1>Keyboard shortcuts:</h1>
<p><em>→</em> Next track</p>
<p><em>←</em> Previous track</p>
<p><em>Space</em> Play/pause</p>
</div>
</div>
</body>
</html>

把这上面的代码复制2份一份另存为为a.html 一份为b.html 放在同一文件夹下
随便打开一个就可以看到你要的效果了
分给的太少了本来不想改的
真是没有想到给你写的东西你把分给了什么都没有写的
太有才了追问你更有才，把人家的东西复制粘贴过来了。。。
看好我的问题，是要跳转到不同页面，不是在一个页面里连续播放，
人家都写好这种JS了，还用你复制一遍干什么。。。

追答我还以为你试过了，看过我写的代码了
结果都不是。
这个是改好的，你按照上面说的保存2个html文件
a.html和b.html
然后随便打开一个里面有2首哥
Someone Like You
Tik Tok
如果你打开的是a.HTML那么播放完Someone Like You
就会跳转到B.HTML接着播放Tik Tok
这个效果不是你问题中要的吗
费了这么大的功夫你看都不看一眼就说是
把人家的东西复制粘贴过来了。。。
太无视了很无语
我所有回答的问题都是经过测试的
真后悔给你解决问题。

热心网友时间：2022-06-26 07:43

哦，明白了,改库的代码不好改.. 你可以这样.
HTML之间也可以传值的从一个页面跳到下一个页面，你把当前播放到那一个了传到下一页面就可以了。。
比如当前1页面放完了，向下跳的时候，传个1到2页面,2页面就知道我要放2歌曲了.
这个就相当于把nextUrl="111.html" 换成传值了.
可以在百度搜索【一个html向另一个 html传值】