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音訊驅動程式安裝精靈出現問題，請繼續閱讀
PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法
Dec 18, 2023 pm 03:39 PM
隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人
