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

Posted 2023-04-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了现成的网页MP3播放器JS，帮我修改成可自动连播的。相关的知识，希望对你有一定的参考价值。

请见 http://kolber.github.com/audiojs/
这个播放器是国外的，audio标签支持了全浏览器（IE系列，FF，OP,SAFARI,CHROME。）
现在是这样，我希望修改成这样：
1：当前页面为1.html，我在页面里设置一个值，比如nextUrl="111.html"，那么当前页面的MP3播放结束后，页面自动跳转到111.html。
我在111.html中也会设置一个值，nextUrl="444.html"，页面中的MP3播放结束后，就会跳转到444.html。
2：如果当前页面中的nextUrl=""，这个值为空时，页面弹出alert提示框“播放列表结束”。
可以用JQ库。但要兼容全浏览器。因为人家现在的播放器就是全兼容的，不要改动完了之后就不兼容了。。。
（可以参考这个的思路，http://kolber.github.com/audiojs/demos/test6.html 不过他这个是在同一个页面里实现连播，我要的是跳转到不同页面，增加页面访问量的。）

<!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
这个效果不是你问题中要的吗
费了这么大的功夫你看都不看一眼就说是
把人家的东西复制粘贴过来了。。。
太无视了很无语
我所有回答的问题都是经过测试的
真后悔给你解决问题。

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

如何用HTML写代码实现自动播放音乐

参考技术A 由于浏览器的安全策略问题，现在已经不再支持打开页面自动播放音乐了，如需要播放还是要让用户点击播放才可以，可以使用html5的audio标签加载音乐播放。
<audio src="https://lanye.org/demo.mp3" controls width="100%"></audio> 参考技术B

前几天一个朋友找到我，他说他女朋友马上过生日，于是想问问我能不能写一个生日祝福代码。好兄弟的请求当然不能拒绝，直接安排！！

于是我用html写了一个简单的页面：点开后会显示来到这个世界多长时间和祝福话语，下滑后是自转相册（有背景音乐）。

原文链接：

html生日快乐代码

核心代码（不是完整代码）：

#head

width:100%;
height:100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation:donghua 15s linear 0s infinite;
-moz-transform-style: preserve-3d;
-moz-animation:donghua 15s linear 0s infinite;
-ms-transform-style: preserve-3d;
-ms-animation:donghua 25s linear 0s infinite;

#head div

position: absolute;
top:0;
left:0;
width:300px;
height:400px;
border:1px solid #000
text-align: center;
line-height:100px;

#head div:nth-child(1)

-webkit-transform:rotateY(0deg) translateZ(400px);
-moz-transform:rotateY(0deg) translateZ(400px);
-ms-transform:rotateY(0deg) translateZ(400px);
background:url(images/01.png);
background-size:cover;
12345678910111213141516171819202122232425262728293031
Heart.prototype.draw = function()
this.size -= this.speedSize;
this.x += this.speedX;
this.y += this.speedY;
ctx.save();
ctx.translate(-1000,this.y);
ctx.scale(this.size, this.size);
ctx.beginPath();
for (var i = 0; i < precision; i++)
var vector = this.vertices[i];
ctx.lineTo(vector.x, vector.y);

ctx.globalAlpha = this.size;
ctx.shadowBlur = Math.round((3 - this.size) * 10);
ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
ctx.shadowOffsetX = this.x + 1000;
ctx.globalCompositeOperation = "screen"
ctx.closePath();
ctx.fill()
ctx.restore();
;

function render(a)
requestAnimationFrame(render);

hearts.push(new Heart())
ctx.clearRect(0,0,ww,wh);
for (var i = 0; i < hearts.length; i++)
hearts[i].draw();
if(hearts[i].size <= 0)
hearts.splice(i,1);
i--;

onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
requestAnimationFrame(render);

window.οnlοad=function starttime()
time(h1,'2000,1,1'); // 出生时间
ptimer = setTimeout(starttime,1000); // 添加计时器

function time(obj,futimg)
var nowtime = new Date().getTime(); // 现在时间转换为时间戳
var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳
var msec = nowtime-futruetime; // 毫秒未来时间-现在时间
var time = (msec/1000); // 毫秒/1000
var day = parseInt(time/86400); // 天 24*60*60*1000
var hour = parseInt(time/3600)-24*day; // 小时 60*60 总小时数-过去的小时数=现在的小时数
var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份取余剩下秒数秒数/60 就是分钟数
var second = parseInt(time%60); // 以60秒为一整份取余剩下秒数
obj.innerHTML="陈陈<br>你已经来到这个世界：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了<br><span>今日是你的生日，愿所有的快乐、所有的幸福、所有的温馨、所有的好运围绕在你身边。生日快乐！</span><p>下<br>滑<br>有<br>惊<br>喜</p>"

return true;
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162