js zur Realisierung eines Web-Musikplayers
|
Dieser Artikel enthält einfachen HTML- und Musikplayer-Produktionscode zu Ihrer Information. Der spezifische Inhalt ist wie folgt Suchen Sie zunächst die Bild- und Musikressourcen und legen Sie sie in den Ordner img Der zweite Schritt besteht darin, das Seitenlayout anzuordnen Der dritte Schritt besteht darin, JS-Code zu schreiben Wenn Sie den Code kopieren und ausführen, müssen Sie die Namen der Bildressourcen und Musikressourcen ändern. Führen Sie den Vorgang zum Umschalten der Bilder aus. Der Effekt ist wie unten dargestellt:
Der Code lautet wie folgt: Hoffe es gefällt dir! ! !
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<Titel></Titel>
<style type="text/css">
* {
Rand: 0;
Polsterung: 0;
}
Körper{
Hintergrundfarbe: #596653;
}
.yinyue {
Breite: 300px;
Höhe: 300px;
Rand: 1px, durchgehendes Aquamarinblau;
Rand: 50px 500px;
}
.bofang {
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: Aqua;
}
.stummgeschaltet, .abspielen, .bevorzugen, .weiter{
Breite: 60px;
Höhe: 30px;
Hintergrundfarbe: Aquamarin;
Textausrichtung: zentriert;
Zeilenhöhe: 30px;
}
#kongzhi, #shangxia
Rand: 10px 530px;
}
</Stil>
</Kopf>
<Text>
<div id="Inhalt">
<img class="yinyue" src="img/yinyue1.jpg" >
<audio src="img/yinyue1.mp3" >
</audio>
<div id="Jahr">
<div id="kongzhi">
<button class="muted" type="button" >Stumm</button>
<img class="bofang" src="img/play.png" >
<button class="play" type="button" >Abspielen</button>
</div>
<div id="shangxia">
<button class="prefer" type="button">Vorheriges Lied</button>
<span>Lautstärke</span>
<Eingabeklasse="Volumen" Typ="Bereich" min="0" max="1"Schritt="0,01" />
<button class="next" type="button">Nächstes Lied</button>
</div>
</div>
</div>
<Skripttyp="text/javascript">
var index=0;
var srcs=['img/yinyue1.mp3','img/yinyue2.mp3','img/yinyue3.mp3'];
var imgArr=['img/yinyue1.jpg','img/yinyue2.jpg','img/yinyue3.jpg'];
var audio = document.querySelector("audio");
var playBtn = document.querySelector(".play");
var mutedBtn = document.querySelector(".muted");
var volumeBtn = document.querySelector(".volume");
var bofang = document.querySelector('.bofang');
var bevorzugen = document.querySelector(".bevorzugen");
var nextBtn = document.querySelector(".next");
var yinyue = document.querySelector(".yinyue")
playBtn.onclick=Funktion(){
wenn(audio.paused===true){
audio.abspielen();
bofang.src='img/play.png';
audio.value="abspielen";
}anders{
audio.pause();
bofang.src = "img/pause.png";
audio.value="Pause";
}
}
mutedBtn.onclick=Funktion(){
wenn(audio.muted==true){
audio.stummgeschaltet=false;
}
anders{
audio.stummgeschaltet=wahr;
bofang.src = "img/silent.png";
}
}
volumeBtn.onchange=Funktion(){
audio.lautstärke=lautstärkeBtn.wert;
}
bevorzugen.onclick=function(){
Index--;
wenn(index<0){
index=srcs.Länge-1;
}
audio.srcs = srcs[index];
yinyue.src=imgArr[index];
}
nextBtn.onclick=Funktion(){
Index++;
wenn(index==srcs.length){
Index = 0;
}
audio.src = srcs[index];
yinyue.src=imgArr[index];
}
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Installieren Sie die Befehlsfunktionen „Zip“ und „Unzip“ unter Linux und CentOS (Server).
>>: Sind Sie immer noch Select *?
Artikel empfehlen
Erklärung der CAST- und CONVERT-Funktionen zur Typkonvertierung in MySQL-Datenbanken
Mit den MySQL-Funktionen CAST() und CONVERT() kön...
So verwenden Sie gespeicherte Prozeduren in MySQL, um schnell 1 Million Datensätze zu generieren
Vorwort Um beim Testen die Fähigkeit des Projekts...
So importieren Sie Vue-Komponenten automatisch bei Bedarf
Inhaltsverzeichnis Globale Registrierung Teilregi...
Docker richtet Port-Mapping ein, kann aber nicht auf die Lösung zugreifen
#docker ps-Check, alle Ports sind zugeordnet CONT...
So erstellen Sie einen MySQL PXC-Cluster
Inhaltsverzeichnis 1. Einführung in PXC 1.1 Einfü...
CSS3 implementiert horizontale Zentrierung, vertikale Zentrierung, horizontale und vertikale Zentrierung Beispielcode
Als Front-End-Affe werden wir, sei es während ein...
JavaScript-Plugin-Kapselung für Tabellenwechsel
In diesem Artikel wird der Kapselungscode von Jav...
Linux verwendet Rsync + Inotify, um eine Echtzeitsynchronisierung lokaler und Remotedaten zu erreichen
0x0 Testumgebung Der Produktionsserver der Zentra...
Detaillierte Erklärung zur Verwendung von MySQL mysqldump
1. Einführung in mysqldump mysqldump ist ein logi...
Erlernen Sie schnell die Verwendung von Docker zum Erstellen einer Entwicklungsumgebung
Da die Plattform weiter wächst, ist die Forschung...
Detaillierte Erklärung des JS-Speicherplatzes
Inhaltsverzeichnis Überblick 1. Stapeln und Aufhä...
Reines CSS3 zum Erstellen eines Beispielcodes für Haushühner
Ich habe in letzter Zeit viel Wissen und Artikel ...
Detaillierte Erklärung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile]
Zusammenfassung: Damit Ihre Webseite schöner auss...
Optimierung des HTML-Eingabefelds zur Verbesserung des Benutzererlebnisses und der Benutzerfreundlichkeit
Um das Benutzererlebnis und die Benutzerfreundlich...
Detaillierte Schritte zur Neuinstallation von VMware Tools (grafisches Tutorial)
VMware Tools ist ein Tool, das mit virtuellen VMw...