Vue.js implementiert Musikplayer

In diesem Artikel wird der spezifische Code von Vue.js zur Implementierung des Musikplayers zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Das Verzeichnis lautet wie folgt:

Der Laufeffekt ist in der Abbildung dargestellt:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <Titel></Titel>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   * {
    Rand: 0;
    Polsterung: ;
   }
   ul {
    Listenstil: keiner;
   }
   ul li {
    Rand: 20px;
    Polsterung: 10px 5px;
    Rahmenradius: 3px;
   }
   ul li.aktiv {
    Hintergrundfarbe: Aqua;
   }
      #Kontrolle {
    Breite: 100 %;
    Höhe: 80px;
   }
   .nächstes,.vorher {
    Breite: 100px;
    Höhe: 80px;
    Hintergrundfarbe: Aqua;
 
   }
   h1 {
       Farbe: rot
   }
   
  </Stil>
 </Kopf>
 <Text>
    <div id="app">
   
     <audio :src="currentSrc" controls="controls" autoplay="autoplay" @ended="changEnd"></audio>
       <h1>Mehr als nur ein Code-Porter</h1>
      <ul>
       <li :class='{active:index === currentIndex}' v-for='(item,index) in musicData' :key="item.id" @click="changeSong(item.songSrc,index)">
     <h2>{{item.id }}---Songtitel: {{item.name}}----{{item.author}}</h2>
    </li>
      </ul>
   <div id="Steuerung">
    <button class="before" type="button" @click="beforeSong" >Vorheriges Lied</button>
    <button class="next" type="button" @click="nextSong" >Nächstes Lied</button>
   </div>
   
     
    </div>
    <Skripttyp="text/javascript">
     const musicData = [{
          ID: 1,
    Name: 'Ich mag dich',
    Autor: 'Kit Chan',
    songSrc: './status/Kit Chan – Ich mag dich.mp3'
     },
     {
      ID: 2,
      Name: 'Ich vermisse dich wieder',
      Autor: 'Kleine Gans',
      songSrc: './status/小鹅- Ich vermisse dich wieder.mp3'
     }
     ];
     var app = new Vue({
      el: '#app',
      Daten: {
       Musikdaten,
       aktuellerIndex: 0,
       currentSrc: './status/小鹅- Ich vermisse dich wieder.mp3'
      },
      Methoden: {
       ändereSong (Quelle,Index) {
        dies.currentSrc = src;
        dies.aktuellerIndex = Index;
       },
       changEnd() {
       dies.aktuellerIndex++;
       wenn(dieser.aktuellerIndex===diese.Musikdaten.Länge){
      dieser.aktuellerIndex = 0;
       }
       dies.currentSrc = dies.musicData[dieser.currentIndex].songSrc; 
       },
       nächstesLied() {
        dies.aktuellerIndex++;
        wenn(dieser.aktuellerIndex===diese.Musikdaten.Länge){
          dieser.aktuellerIndex = 0;
        }
         dies.currentSrc = dies.musicData[dieser.currentIndex].songSrc; 
        Konsole.log(dieser.aktuellerIndex)
       },
       vorSong () {
        
        wenn(dieser.aktuellerIndex===0){
         dieser.aktuellerIndex=diese.Musikdaten.Länge; 
        }
         dies.aktuellerIndex--;
         dies.currentSrc = dies.musicData[dieser.currentIndex].songSrc; 
       }
       
       
      }
     })
    </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:

js zur Realisierung eines Web-Musikplayers
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

<<: Wie Sie eine statische IP in CentOS7 auf VirtualBox6 festlegen und was Sie dabei beachten müssen

>>: Das ausführliche Tutorial zum Herunterladen und Installieren von MySQL 8.0.15 ist für Anfänger ein Muss!