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:
|
<<: Wie Sie eine statische IP in CentOS7 auf VirtualBox6 festlegen und was Sie dabei beachten müssen
Artikel empfehlen
Detaillierte Erklärung zur Verwendung der Funktionen IF(), IFNULL(), NULLIF() und ISNULL() in MySQL
In MySQL können Sie die Funktionen IF(), IFNULL()...
So erhalten Sie USB-Scannerdaten mit js
In diesem Artikel wird der spezifische Prozess zu...
Das Problem, dass bei der Installation von RabbitMQ in Docker die Verwaltungsseite nicht aufgerufen werden kann
1. Umweltvorbereitung Tencent Cloud Server CENTOS...
So erstellen Sie eine Ansicht für mehrere Tabellen in MySQL
Erstellen Sie in MySQL eine Ansicht für zwei oder...
Detaillierte MySQL-CRUD-Anweisungen zum Hinzufügen, Löschen, Ändern und Abfragen einer einzelnen Tabelle
MySQL-Anweisungen zum Hinzufügen, Löschen, Ändern...
Eine detaillierte Einführung in die drei Installationsmethoden von RPM, Yum und Quellcode unter Linux
Kapitel 1 Installation des Quellcodes Die Install...
Tutorial zur Installation von MySQL 5.6 auf CentOS 6.5
1. Laden Sie das RPM-Paket für Linux herunter htt...
Detaillierte Erklärung der grundlegenden Interaktion von Javascript
Inhaltsverzeichnis 1. So erhalten Sie Elemente Ho...
Detaillierte Erklärung zur Synchronisierung von Daten von MySQL mit Elasticsearch
Inhaltsverzeichnis 1. Synchronisationsprinzip 2. ...
Eine kurze Analyse der Unterschiede zwischen den häufig verwendeten Anweisungen v-if und v-show von Vue
Inhaltsverzeichnis Vorwort 1.v-show 2.v-wenn 3. D...
So installieren Sie das Modul „lua-nginx-module“ in Nginx
ngx_lua_module ist ein Nginx-HTTP-Modul, das den ...
Grundlegende Verwendung von @Font-face und wie man es mit allen Browsern kompatibel macht
@Font-face grundlegende Einführung: @font-face ist...
Detaillierte Erläuterung der Datentypprobleme bei der JS-Array-Indexerkennung
Als ich ein WeChat-Applet-Projekt schrieb, gab es...
Diagramm des Bereitstellungs- und Installationsprozesses in der Java+Tomcat-Umgebung
Als nächstes werde ich Java+Tomcat auf Centos7 in...
Detaillierte Erklärung der dynamischen Linkbibliothek, die die C/C++-Methode in Python in Ubuntu aufruft
Boost installieren Es gibt viele Möglichkeiten, C...