JavaScript-Implementierung eines Musik-Players mit Playlist-Beispiel, Sharing

Heim

Web-Frontend

js-Tutorial

JavaScript-Implementierung eines Musik-Players mit Playlist-Beispiel, Sharing_Javascript-Kenntnisse

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:11 PM

javascript js Wiedergabeliste Wiedergabeliste 音乐播放器音频

Der Code fügt im Vergleich zur einfachsten Player-Implementierung eine Wiedergabeliste hinzu und verwendet MakeList, um mehrere Wiedergaben zu implementieren. Bei Bedarf können Sie diese direkt verwenden:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

<!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>

Nach dem Login kopieren

MakeList-Parameter: Es gibt insgesamt 3 Parameter. Der erste Parameter ist die ID, der zweite Parameter ist die URL-Adresse der Musik und der dritte Parameter ist der Name des Songs. Die Anleitungen sind alle in den Kommentaren geschrieben. Jeder ist herzlich eingeladen, sie zu lesen und sich darauf zu beziehen.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

4 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

4 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

1 Monate vor By DDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

2 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7727

Java-Tutorial

1643

CakePHP-Tutorial

1397

Laravel-Tutorial

1290

PHP-Tutorial

1233

Related knowledge

Wie stelle ich die Audiobalance in Win11 ein? (Win11 passt die Lautstärke des linken und rechten Kanals an) Feb 11, 2024 pm 05:57 PM

Wenn beim Musikhören oder Ansehen von Filmen auf einem Win11-Computer die Lautsprecher oder Kopfhörer unausgewogen klingen, können Benutzer den Balancepegel manuell entsprechend ihren Bedürfnissen anpassen. Wie passen wir uns an? Als Reaktion auf dieses Problem hat der Herausgeber ein detailliertes Bedienungs-Tutorial mitgebracht, in der Hoffnung, allen zu helfen. Wie gleicht man den linken und rechten Audiokanal in Windows 11 aus? Methode 1: Tippen Sie in der App „Einstellungen“ auf die Taste und klicken Sie auf „Einstellungen“. Klicken Sie unter Windows auf „System“ und wählen Sie „Sound“ aus. Wählen Sie weitere Toneinstellungen aus. Klicken Sie auf Ihre Lautsprecher/Kopfhörer und wählen Sie Eigenschaften. Navigieren Sie zur Registerkarte „Ebenen“ und klicken Sie auf „Balance“. Stellen Sie sicher, dass „links“ und

Einführungserlebnis der Bose Soundbar Ultra: Heimkino direkt nach dem Auspacken? Feb 06, 2024 pm 05:30 PM

Solange ich mich erinnern kann, habe ich zu Hause ein Paar große Standlautsprecher gehabt. Ich bin der Meinung gewesen, dass ein Fernseher nur dann als Fernseher bezeichnet werden kann, wenn er mit einem kompletten Soundsystem ausgestattet ist. Aber als ich anfing zu arbeiten, konnte ich mir professionelles Home-Audio nicht leisten. Nachdem ich mich erkundigt und die Produktpositionierung verstanden hatte, stellte ich fest, dass die Soundbar-Kategorie für mich sehr gut geeignet ist. Sie erfüllt meine Bedürfnisse in Bezug auf Klangqualität, Größe und Preis. Deshalb habe ich mich für die Soundbar entschieden. Nach sorgfältiger Auswahl habe ich mich für dieses Panorama-Soundbar-Produkt entschieden, das Anfang 2024 von Bose auf den Markt gebracht wurde: den Bose Home-Entertainment-Lautsprecher Ultra. (Fotoquelle: Fotografiert von Lei Technology) Wenn wir den „originalen“ Dolby Atmos-Effekt erleben wollen, müssen wir im Allgemeinen eine gemessene und kalibrierte Surround-Sound-Decke zu Hause installieren.

So sortieren Sie Wiedergabelisten in Apple Music auf dem iPhone Feb 07, 2024 pm 10:33 PM

Apple Music bietet jetzt die Möglichkeit, die Reihenfolge zu ändern, in der Songs in Playlists angezeigt werden. Sie können die Wiedergabeliste nach Titel, Interpret, Album und Veröffentlichungsdatum des Songs sortieren. Diese Funktion gilt für alle Playlists in Apple Music, nicht nur für die, die Sie selbst erstellen. In diesem Artikel erklären wir, wie Sie Songs in Playlists in AppleMusic auf dem iPhone sortieren. So sortieren Sie Songs in der Playlist von AppleMusic auf dem iPhone. Sie können die folgenden Schritte ausführen, um Songs in der AppleMusic-Playlist nach Ihren Wünschen neu anzuordnen. So sortieren Sie die Songs in Ihrer Playlist auf Ihrem iPhone

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert

So richten Sie das Mikrofon im Realtek High-Definition Audio Manager ein Jan 02, 2024 am 09:33 AM

Das Win10-System ist ein System, das verschiedene Einstellungen und Anpassungen vornehmen kann. Heute bietet Ihnen der Editor die Lösung, wie Sie das Mikrofon im Realtek High-Definition-Audio-Manager einstellen. Wenn Sie Interesse haben, kommen Sie vorbei und schauen Sie sich das an. So stellen Sie das Mikrofon im Realtek High-Definition Audio Manager ein: 1. Suchen Sie das Symbol „Realtek High-Definition Audio Manager“ in der unteren linken Ecke des Desktops unter „Ausgeblendete Symbole anzeigen“. 2. Klicken Sie, um die Benutzeroberfläche aufzurufen. Das erste, was Sie sehen, ist die „Lautsprecherseite“. In dieser Benutzeroberfläche können Sie den Lautsprecherklang über die Lautsprecherkonfiguration anpassen. 3. Als nächstes können Sie die gewünschte Soundeffektumgebung sowie „Equalizer, Pop, Rock, Club“ usw. auswählen. 4. Als nächstes erfolgt die Korrektur der Raumklangqualität.

So aktivieren Sie die Audioverbesserungen von Windows 11 Jan 26, 2024 am 10:54 AM

Einige Freunde haben berichtet, dass die Lautstärke in ihrem Computer immer noch zu niedrig ist. Wie kann man das nun tun? , der Editor gibt Ihnen eine detaillierte Einführung. Freunde, die es benötigen, können einen Blick darauf werfen, wie man erweitertes Audio in Win11 aktiviert. So öffnen Sie: 1. Klicken Sie in der Taskleiste unten links mit der rechten Maustaste auf „Start“ und wählen Sie in der Optionsliste „Einstellungen“ aus. 2. Nachdem Sie die neue Benutzeroberfläche aufgerufen haben, klicken Sie unter „System“ auf die Option „Sound“. 3. Klicken Sie dann unter „Erweitert“ auf „Alle Audiogeräte“. 4. Wählen Sie dann unter „Ausgabegeräte“ „Kopfhörer“ oder „Lautsprecher“ aus. 5. Suchen Sie schließlich nach „Enhanced Audio“ und schalten Sie den Schalter auf der rechten Seite ein.

Die Installation des Realtek HD-Audiotreibers ist mit Fehler 0x00005b3 fehlgeschlagen Feb 19, 2024 am 10:42 AM

Wenn auf einem Windows 11/10-PC der Fehlercode 0x00005b3 für den RealtekHD-Audiotreiberfehler auftritt, befolgen Sie bitte die folgenden Schritte, um das Problem zu beheben. Wir begleiten Sie bei der Fehlerbehebung und Behebung des Fehlers. Der Fehlercode 0x00005b3 kann durch Probleme bei der Installation des Audiotreibers verursacht werden. Möglicherweise ist der aktuelle Treiber beschädigt oder teilweise deinstalliert, was sich auf die Installation des neuen Treibers auswirkt. Dieses Problem kann auch durch unzureichenden Speicherplatz oder einen Audiotreiber verursacht werden, der mit Ihrer Windows-Version nicht kompatibel ist. Die Installation des RealtekHD-Audiotreibers ist fehlgeschlagen! ! [Fehlercode: 0x00005B3] Wenn ein Problem mit dem Realtek Audio Driver Installation Wizard auftritt, lesen Sie weiter

PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen Dec 18, 2023 pm 03:39 PM

Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine häufig verwendete Methode der technischen Analyse. Sie können den sich ändernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verständnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zunächst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt

See all articles