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:

Vue.js implementiert Musikplayer
So laden Sie mit Python sofort Musik von Tik Tok herunter
Verwenden Sie den Python-Webcrawler, um den Code wichtiger Musikrezensionen zu crawlen
Hintergrundmusik in Java abspielen
Erstellen Sie einen Musik-Downloader mit Python
Android implementiert die Wiedergabe von Musikvideos
Ein super cooler Musikplayer, den ich selbst in Python erstellt habe

<<: Installieren Sie die Befehlsfunktionen „Zip“ und „Unzip“ unter Linux und CentOS (Server).

>>: Sind Sie immer noch Select *?