JavaScript实现带播放列表的音乐播放器实例分享_javascript技巧
代码较最基础的播放器实现增加了playlist，使用MakeList实现多首播放，有需要的可以直接使用：
<!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>
<title>Untitled Page</title>
</head>
<body style="font-family:Verdana; font-size:12px">
<script>
/*************************************************************
LovelyLife Player V1.0
Edited By LovelyLife
At 2006-09-16
All rights reservered
Code Start
Modify by http://www.tt419.cn/
*************************************************************/
var playid = "LovelyLifePlayer"
var status = "status"
var curId,arrPL,selected
var isStop,isLoop
arrPL = new Array() //播放器列表
cur = 0
curId = 0
isStop = false
selected = 0
isLoop = true
function songObj(Id,url, name){
this.Id = Id
this.url = url
this.name = name
}
function playAndpauseIt(){
if(document.getElementById(status).innerText == '暂停'){
document.getElementById(playid).controls.pause()
document.getElementById(status).innerHTML ='播放'
}
else{ document.getElementById(status).innerText = '暂停'
document.getElementById(playid).controls.play()}
}
function stopIt(){
isStop = true
document.getElementById(status).innerHTML ='播放'
document.getElementById(playid).controls.stop()
}
function showTimer(){
var cp=document.getElementById(playid).controls.currentPosition
var cps=document.getElementById(playid).controls.currentPositionString
var dur=document.getElementById(playid).currentMedia.duration;
var durs=document.getElementById(playid).currentMedia.durationString;
var s = document.getElementById(playid).playState
var o = document.getElementById(playid).openState
if( s==2 || s==3)
document.getElementById('pos').innerText = " " + cps + "/" + durs + " "
else
document.getElementById('pos').innerText = " 00:00/" + durs + " "
if( s == 1 ){
if(isLoop && (curId > (arrPL.length - 1))){
curId = 0
return 0
}
clearIt()
if(curId<0 || curId>arrPL.length){
alert("当前没有歌曲！，请查看播放列表！")
return false
}
nxtPlay()
}
if( s == 10 && arrPL.length >0 )
nxtPlay()
}
function nxtPlay(){
isStop = true
if(curId > arrPL.length - 1){
document.getElementById("songName").innerText = "没有歌曲了，请选择上一曲!"
document.getElementById(playid).URL = "NULL"
return false
}
curId++
clearIt()
setIt(curId)
PlayIt(curId)
}
function prePlay(){
isStop = true
if(curId<0){
document.getElementById("songName").innerText = "没有歌曲了，请选择下一曲!"
document.getElementById(playid).URL = "NULL"
return false
}
curId--
clearIt()
setIt(curId)
PlayIt(curId)
}
function PlayIt(cid){
if(curId<0 || curId>arrPL.length -1){
document.getElementById("songName").innerText = "当前没有歌曲！，请查看播放列表！"
return false
}
url = arrPL[cid].url;
curId = cid
if(url == "None"){
document.getElementById("songName").innerText = "加载歌曲未找到!播放下一曲！"
nxtPlay()
return false
}
document.getElementById(playid).URL = url
document.getElementById("songName").innerText = arrPL[cid].name
}
function clearIt(){
if((arrPL.length - 1 <0) || selected < 0 || selected > arrPL.length){
return false
}
}
function setIt(tid){
if(tid<0 || tid>arrPL.length-1){
document.getElementById("songName").innerText = "当前没有歌曲！，请查看播放列表！"
return false
}
}
function InitPlay(songName,url,auto){
var strTemp = "<object classid=\"CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6\""
strTemp += " type=\"application/x-oleobject\" width=\"0\" height=\"0\" id=" + playid
strTemp += " style=\"position:relative; left:0px; top:0px; width:0px; height:0px;\">\n"
strTemp += " <param name=\"autoStart\" value=\""+auto+"\">\n"
strTemp += " <param name=\"balance\" value=\"0\">\n"
strTemp += " <param name=\"currentPosition\" value=\"0\">\n"
strTemp += " <param name=\"currentMarker\" value=\"0\">\n"
strTemp += " <param name=\"enableContextMenu\" value=\"0\">\n"
strTemp += " <param name=\"enableErrorDialogs\" value=\"0\">\n"
strTemp += " <param name=\"enabled\" value=\"-1\">\n"
strTemp += " <param name=\"fullScreen\" value=\"0\">\n"
strTemp += " <param name=\"invokeURLs\" value=\"0\">\n"
strTemp += " <param name=\"mute\" value=\"0\">\n"
strTemp += " <param name=\"playCount\" value=\"1\">\n"
strTemp += " <param name=\"rate\" value=\"1\">\n"
strTemp += " <param name=\"uiMode\" value=\"none\">\n"
strTemp += " <param name=\"volume\" value=\"100\">\n"
strTemp += " <param name=\"URL\" value=\"" + url + "\">\n"
strTemp += "</object>\n<font class=HighLight style=\"background-color: #EEE;padding: 8px;height:30px;width:100%\">"
strTemp += "<b>点播的歌曲: <marquee width=30% speed=3><font color=red id=songName>" + songName + "</font></marquee>"
strTemp += " [<font id=pos></font>]"
strTemp += " [<font onclick=playAndpauseIt() style='cursor:hand;' id=" + status + ">播放</font>]"
strTemp += "[<font onclick=stopIt() style='cursor:hand;'>停止</font>]"
if((arrPL.length - 2) >= 0){
strTemp += "[<font onclick=prePlay() style='cursor:hand;'>上曲</font>]"
strTemp += "[<font onclick=nxtPlay() style='cursor:hand;'>下曲</font>]"
}
strTemp += " </b>"
document.getElementById('player').innerHTML = strTemp
temptimer=setInterval('showTimer()',1000);
}
function playX(cur){
PlayIt(cur)
clearIt()
setIt(cur)
curId = cur
selected = cur
}
function MakeList(Id,Url,Name){
arrPL[cur] = new songObj(Id,Url, Name)
cur++
}
function loopIt(){
if(isLoop){
document.getElementById('sloop').innerText = "不循环"
isLoop = false
}else{
document.getElementById('sloop').innerText = "循环播放"
isLoop = true
}
}
/* Code End */
window.attachEvent('onload', function(){
InitPlay("女人如烟[词曲：穆真 演唱：魏佳艺]","http://happy369.com/yy/nrry.mp3", 1);
playAndpauseIt();
})
</script>
<div id=player style="width:70%"></div>
<script>
MakeList(1,"http://happy369.com/yy/nrry.mp3","111");
MakeList(2,"http://www.gxyx.net/sourcefile/0/0/2/2958.wma","222");
MakeList(3,"http://hz.98777.com/rm0402/q/258.rm","333");
MakeList(4,"http://www.gxyx.net/sourcefile/0/0/2/2958.wma","4444");
</script>
</body>
</html>
MakeList参数：共3个参数，第一个是ID,第二个参数是音乐的URL地址，第三个参数是歌曲的名称。说明都写在注释里了，欢迎大家阅读和参考。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Win11如何调节音频平衡？(Win11调整音量的左右声道)
Feb 11, 2024 pm 05:57 PM
在Win11电脑上听音乐或看电影，如果扬声器或耳机听起来不平衡，用户可以根据自己的需求手动调整平衡级别。那么我们要如何调整呢？针对这个问题，小编带来了详细的操作教程，希望可以帮到大家。如何在Windows11中平衡左右音频通道？方法一：使用“设置”应用点击键并单击设置。Windows单击系统，然后选择声音。选择更多声音设置。单击您的扬声器/耳机，然后选择属性。导航到“级别”选项卡，然后单击“余额”。确保“左”和
Bose Soundbar Ultra首发体验：开箱即用的家庭影院？
Feb 06, 2024 pm 05:30 PM
从我记事开始，家里就有一对落地式的大尺寸音箱，让我一直认为电视只有配上一套完整的音响系统才能称得上是电视。但是刚开始工作的时候，我买不起专业的家庭音响。经过查询和了解产品定位后，我发现回音壁这个品类非常适合我，不论是音质、体积还是价格都符合我的需求。因此，我决定选择回音壁。精挑细选后，我选中了2024年初Bose推出了这款全景声回音壁产品：Bose家庭娱乐扬声器Ultra。（图片来源：雷科技摄制）一般来说，想要体验到「原汁原味」的杜比全景声效果，需要我们在家中布置一套经过测量、校准的环绕声+吊顶
如何在iPhone上的Apple Music中对播放列表进行排序
Feb 07, 2024 pm 10:33 PM
AppleMusic现在提供了重新排列播放列表中歌曲显示顺序的功能。您可以根据歌曲的标题、艺术家、专辑和发行日期对播放列表进行排序。这个功能适用于所有AppleMusic中的播放列表，不仅限于您自己创建的播放列表。在这篇文章中，我们将解释如何在iPhone上的AppleMusic中对播放列表中的歌曲进行排序。如何在iPhone上的AppleMusic中对播放列表中的歌曲进行排序您可以按照以下步骤根据自己的喜好重新排列AppleMusic播放列表中的歌曲。若要对播放列表中的歌曲进行排序，请在iPh
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
realtek高清晰音频管理器如何设置麦克风
Jan 02, 2024 am 09:33 AM
win10系统是一款可以进行各种设置和调节的系统，今天小编为大家带来的就是realtek高清晰音频管理器怎么设置麦克风的解决办法！感兴趣的话就快来看看吧。realtek高清晰音频管理器怎么设置麦克风：1、在桌面左下角的显示隐藏图标中找到“realtek高清晰音频管理器”图标。2、点击进入界面中，首先看到的是“扬声器页面”，这个界面可以通过喇叭组态调整喇叭的声音。3、接着是音效，你可以选择自己想要的音效的环境以及“均衡器，流行、摇滚、俱乐部”等等。4、接着是室内矫正音质，室内空间矫正只能够矫正在“
如何启用Win11音频增强功能
Jan 26, 2024 am 10:54 AM
有一些小伙伴反映自己电脑中的声音即使开到了最大，音量依旧偏小，这时就可以将系统中的增强音频功能打开，那么具体应该怎么操作呢，接下来小编就给大家详细介绍一下Win11增强音频的打开方法，有需要的小伙伴可以来看一看。打开方法：1、右击左下角任务栏中的开始，选择选项列表中的"设置"。2、进入到新的界面后，点击"系统"中的"声音"选项。3、随后点击"高级"中的"所有声音设备"。4、然后选择"输出设备"中的"耳机"或者"扬声器"。5、最后找到"增强音频"，并将其右侧的开关按钮打开就可以了。
安装Realtek HD音频驱动程序失败，错误0x00005b3
Feb 19, 2024 am 10:42 AM
如果您在Windows11/10PC上遇到RealtekHD音频驱动程序失败错误代码0x00005b3，请参考以下步骤以解决问题。我们将指导您进行故障排除并解决该错误。错误代码0x00005b3可能是由于音频驱动程序的安装问题导致的。可能是当前的驱动程序损坏或部分卸载，从而影响新驱动程序的安装。此问题还可能由磁盘空间不足或与Windows版本不兼容的音频驱动程序引起。安装RealtekHD音频驱动程序失败！！[错误代码：0x00005B3]如果Realtek音频驱动程序安装向导出现问题，继续阅读
汽水音乐歌单怎么不让别人看见
Feb 27, 2024 pm 12:30 PM
汽水音乐是一款为音乐爱好者量身打造的音乐播放软件，它拥有海量的音乐资源，涵盖了当下最热门、最流行、最经典的音乐作品。无论你喜欢独立创作、流行金曲还是经典老歌，都可以在汽水音乐中找到满足你需求的音乐。但是我们在收藏自己喜欢的音乐以后却可能不想让别人查看，那么究竟该如何在汽水音乐中设置仅自己可见呢，想要了解的玩家们就快来跟着本文一起详细了解一下吧。汽水音乐歌单怎么仅自己可见？1、首先打开汽水音乐App，点击右下角“我的”，如下图所示。2、进入到我的界面，打开要设置的歌单，如下图所示。3、进入到歌单详
