Vues einfacher Implementierungsprozess zur Nachahmung der NetEase Cloud Music Player-Schnittstelle
|
Aufgrund der Anforderungen des Arbeitsprojekts ist eine Songwiedergabe erforderlich. Unter Bezugnahme auf verschiedene Materialien habe ich eine Schnittstelle geschrieben, die die NetEase Cloud Music-Wiedergabe imitiert und die Musikwiedergabefunktion vollständig realisieren kann.
Das Front-End verwendet einfach Vue-Komponenten und Audio-Tags, um die Player-Schnittstelle zu implementieren, während das Back-End die API von NetEase Cloud aufruft, um die entsprechenden Songinformationen zu erhalten.
Kommen wir nun ohne weitere Umschweife zum Code Schnittstelle zur Songwiedergabe (musicPlay.vue) <Vorlage>
<div Klasse="Hauptseite">
<audio :src="songInfo.url" id="Musik" autoplay="Autoplay"></audio>
<div
Klasse = "Hintergrund-Flitter"
:style="`Hintergrundbild: url(${songInfo.cover})`"
></div>
<div Klasse="mini spielen">
<div Klasse="Fortschrittsbalken" @click="handleProgressClick" ref="track">
<div
Klasse="Fortschrittsbox"
:style="{ width: audioProgressPercent }"
></div>
</div>
<div Klasse="songInfo">
<img class="poster" :src="songInfo.cover" alt="" />
<!-- Songtitel, Name des Sängers-->
<div Klasse="info">
<p style="Schriftgewicht: 600; Farbe: #fff;">{{ songInfo.name }}</p>
<p style="font-size: 14px; color: #fff">{{ songInfo.artistsName }}</p>
</div>
</div>
<div Klasse="Steuerungen">
<!-- Hinweis zum vorherigen Song-->
<Tooltip content="Vorheriges Lied" theme="light" :delay="1500">
<a href="javascript:;">
<Symbol
Typ="md-skip-backward"
@click="Zurück überspringen"
Größe="26"
Farbe="weiß"
/>
</a>
</Tooltip>
<!-- Wiedergabepause -->
<Tooltip content="Wiedergabe Pause" theme="light" :delay="1500">
<Bild
@click="Musik abspielen"
Klasse="Status"
v-show="!spielen"
Quelle="@/assets/play_icon.png"
alt=""
/>
<Bild
Klasse="Status"
@click="Musik abspielen"
v-show="wird abgespielt"
Quelle="@/assets/play-02.png"
alt=""
/>
</Tooltip>
<!-- Hinweis zum nächsten Song-->
<Tooltip content="Nächstes Lied" theme="light" :delay="1500">
<a href="javascript:;">
<Symbol
Typ="md-skip-forward"
@click="Vorwärtsspringen"
Größe="26"
Farbe="weiß"
/>
</a>
</Tooltip>
</div>
<div Klasse="rechts unten">
<div Klasse="text-div"></div>
<!-- Lautstärke -->
<a href="javascript:;">
<Symbol
:Typ="Volumentyp"
Größe="26"
Farbe="weiß"
@click="Lautstärkeänderung"
/>
</a>
<div Klasse="text-div"></div>
<Schieberegler
Stil="Breite: 80px; Z-Index: 99999"
@on-input="Volumen ändern"
v-Modell="Volumen"
></Schieberegler>
<div Klasse="text-div"></div>
<div Klasse="text-div"></div>
<div Klasse="text-div"></div>
<!-- Songwiedergabetyp -->
<Tooltip :content="showPlayType" theme="light" :delay="1500">
<a href="javascript:;">
<Symbol
:benutzerdefiniert="Spielstatus"
@click="SpieltypÄndern"
Größe="26"
Farbe="weiß"
/>
</a>
</Tooltip>
<div Klasse="text-div"></div>
<div Klasse="text-div"></div>
<div Klasse="Wiedergabeliste">
<!-- Wiedergabeliste -->
<Tooltip content="Liste" theme="hell" :delay="1500">
<a href="javascript:;">
<Symbol
benutzerdefiniert="iconfont icon-bofangqi-xuanji"
@click="Schublade = wahr"
Größe="36"
Farbe="weiß"
/>
</a>
</Tooltip>
</div>
</div>
</div>
<div Klasse="Songcover-Lyric">
<div Klasse="Scheibenkontinuer">
<div Klasse="Poster" ref="drehen">
<img :src="songInfo.cover" alt="" />
</div>
<div class="song-name">{{ songInfo.name }}</div>
<div class="song-artistsName">{{ songInfo.artistsName }}</div>
</div>
<div Klasse="Liedtext">
<mscroll
ref="Songtext"
:Farbe="Farbe"
:FarbeLicht="FarbeLicht"
:lineHeight="Zeilenhöhe"
:paddingTop="paddingTop"
:Schriftgröße="Schriftgröße"
:lyricIndex="LyricIndex"
:lyricsList="Textinfo"
></mscroll>
</div>
</div>
<Schublade
Titel="Wiedergabeliste"
Platzierung="links"
Breite="320"
:schließbar="falsch"
v-Modell="Schublade"
>
<div Klasse="Listencontainer">
<div
Klasse="SongInfo"
v-for="(Element, Index) in Songliste"
:Schlüssel="Index"
@click="PlayListMusic(index)"
>
<img :src="item.cover" alt="" />
<div Klasse="info">
<div Klasse="name">{{ Artikel.name }}</div>
<div class="singer">{{ item.artistsName }}</div>
</div>
</div>
</div>
</Schublade>
</div>
</Vorlage>
<Skript>
importiere { showMessage } von "../../publicMethod/publicMethods";
importiere Mscroll aus "./lyricScroll.vue";
importiere commonJs aus "../../utils/timeConversion";
importiere Axios von „Axios“;
Standard exportieren {
Daten() {
zurückkehren {
volumeNum: 80, //Gespeicherte Lautstärke volumeStatus: true, //Lautstärkesymbol ändert sich volumeType: "md-volume-up", //Lautstärkesymbol playStatus: "iconfont icon-xunhuanbofang", //Wiedergabetypsymbol playing: false,
Schublade: falsch,
Spielindex: 0,
Liedinfo: {},
Liedliste: [],
Lautstärke: 80, // Lautstärke lyricInfo: [],
playType: 1, // Wiedergabetyp: 1-Listenschleife, 2-Zufallswiedergabe, 3-EinzelschleifeshowPlayType: "Listenschleife",
Audiofortschritt: 0,
DaumenübersetzungX: 0,
lyricIndex: 0,
color: "#fff", //Standardfarbe der Liedtexte colorLight: "#40ce8f", //Hervorhebungsfarbe der Liedtexte fontSize: "16px", //Schriftgröße der Liedtexte lineHeight: "42", //Höhe jedes Absatzes paddingTop: "300px", //Hervorgehobenen Liedtextteil zentrieren};
},
erstellt() {},
Komponenten:
Mscroll,
},
berechnet: {
audioProgressPercent() {
gibt `${this.audioProgress * 100}%` zurück;
},
},
montiert() {
const Musik = document.getElementById("Musik");
wenn (diese.$route.query.play) {
dies.ClickPlay();
} anders {
dies.GetSongList();
}
wenn (dieses.spielen) {
// Wird abgespielt. Klicken Sie hier, um dies anzuhalten.playing = false;
this.$refs.rotate.style.animationPlayState = "pausiert";
musik.pause();
} anders {
// Angehalten, klicken Sie hier, um dies abzuspielen.playing = true;
this.$refs.rotate.style.animationPlayState = "läuft";
musik.abspielen();
}
},
Methoden: {
//Lautstärkeänderungen volumeChange() {
wenn (dieser.volumeStatus) {
this.volumeStatus = falsch;
diese.volumeNum = dieses.volume;
dieses.Volumen = 0;
this.volumeType = "md-volume-aus";
} anders {
dieser.volumeStatus = wahr;
dieses.Volumen = diese.Volumennummer;
this.volumeType = "md-volume-up";
}
},
//Ändert den Wiedergabetyp des Songs playTypeChange() {
wenn (dieser.Spieltyp == 1) {
dieser.Spieltyp = 2;
this.showPlayType = "Zufällige Wiedergabe";
this.playStatus = "Iconfont-Symbol-suijibofang";
zurückkehren;
}
wenn (dieser.Spieltyp == 2) {
dieser.Spieltyp = 3;
this.showPlayType = "Einzelne Schleife";
this.playStatus = "Iconfont-Symbol-danquxunhuan";
zurückkehren;
}
wenn (dieser.Spieltyp == 3) {
dieser.Spieltyp = 1;
this.showPlayType = "Listenschleife";
this.playStatus = "Iconfont-Symbol-xunhuanbofang";
zurückkehren;
}
},
Klicken/Spielen() {
dies.audioInit();
dies.getMusicList(diese.songInfo.id);
this.$refs.rotate.style.animationPlayState = "läuft";
dies.spielen = wahr;
setzeTimeout(() => {
musik.abspielen();
}, 100);
},
GetSongList() {
axios.get("/musicController/getMusicList").then(this.GetSongListInfo);
},
GetSongListInfo(res) {
lass meineListe;
wenn (res.code == "0000") {
meineListe = res.data;
} anders {
console.log("Keine Daten gefunden");
meineListe = [
{
Künstlername: "Die Katze des Landlords",
Abdeckung:
„https://p3.music.126.net/KkrcSwKbRsd8GuaOHILlxA==/109951166077317301.jpg“,
ID: 1857630559,
Name: "Neuer Junge",
URL: „https://music.163.com/song/media/outer/url?id=1857630559.mp3“,
Text:
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
},
];
}
this.songList = meineListe;
diese.songInfo = diese.songList[0];
this.getMusicList(this.songInfo.id); //Holen Sie sich die URL-Liedtextinformationen des abgespielten Lieds über die ID des abgespielten Lieds this.audioInit();
},
audioInit() {
lass das = dies;
let progressL = this.$refs.track.offsetWidth; // Gesamtlänge des Fortschrittsbalkens music.addEventListener("timeupdate", () => {
// Aktuelle Wiedergabezeit let compareTime = music.currentTime;
für (lass i = 0; i < that.lyricInfo.length; i++) {
wenn (Vergleichszeit > parseInt(that.lyricInfo[i].time)) {
const index = das.lyricInfo[i].index;
wenn (i === parseInt(index)) {
das.lyricIndex = i;
}
}
}
das.aktuelleZeit = commonJs.TimeToString(musik.aktuelleZeit);
that.audioProgress = Musik.aktuelleZeit / Musik.Dauer;
that.thumbTranslateX = (that.audioProgress * progressL).toFixed(3);
});
music.addEventListener("beendet", () => {
Schalter (parseInt(that.playType)) {
Fall 1: // Listenschleife that.playIndex =
dieser.playIndex + 1 >= diese.songList.length
? 0
: das.playIndex + 1;
brechen;
Fall 2: // Zufällig abspielen that.playIndex = Math.floor(Math.random() * that.songList.length);
brechen;
Fall 3: // einzelne Schleife abbrechen;
}
das.songInfo = das.songList[das.playIndex];
dies.getMusicList(das.songInfo.id);
setzeTimeout(() => {
this.$refs.rotate.style.animationPlayState = "läuft";
musik.abspielen();
}, 200);
});
},
//Abspielen und pausieren playMusic() {
wenn (dieses.spielen) {
// Wiedergabe läuft. Klicken Sie hier, um dies anzuhalten.playing = false;
this.$refs.rotate.style.animationPlayState = "pausiert";
musik.pause();
} anders {
// Angehalten, klicken Sie hier, um dies abzuspielen.playing = true;
this.$refs.rotate.style.animationPlayState = "läuft";
musik.abspielen();
}
},
PlayListMusic(index) {
dies.playIndex = index;
diese.songInfo = diese.songList[dieser.playIndex];
dies.getMusicList(diese.songInfo.id);
dies.spielen = wahr;
diese.Schublade = falsch;
setzeTimeout(() => {
this.$refs.rotate.style.animationPlayState = "läuft";
musik.abspielen();
}, 200);
},
//Klicken Sie auf den Fortschrittsbalken handleProgressClick(event) {
let progressL = this.$refs.track.offsetWidth; // Gesamtlänge des Fortschrittsbalkens let clickX = event.offsetX;
let Zeit = (KlickX / FortschrittL).toFixed(2);
this.setProgress(Zeit);
},
setProgress(x) {
musik.aktuelleZeit = musik.dauer * x;
},
// Vorheriger Song skipBack() {
this.skipFn("skipBack");
},
// Nächstes Lied skipForward() {
this.skipFn("skipForward");
},
// Kapselung des oberen und unteren Headers skipFn(Typ) {
Schalter (parseInt(dieser.playType)) {
Fall 2: // Zufällig abspielen this.playIndex = Math.floor(Math.random() * this.songList.length);
brechen;
Standard:
wenn (Typ == "skipBack") {
this.playIndex - 1 >= 0 ? this.playIndex-- : 0;
} anders {
dies.playIndex =
dieser.playIndex + 1 >= diese.songList.length
? diese.songList.length - 1
: dies.playIndex + 1;
}
brechen;
}
diese.songInfo = diese.songList[dieser.playIndex];
dies.getMusicList(diese.songInfo.id);
dies.spielen = wahr;
setzeTimeout(() => {
this.$refs.rotate.style.animationPlayState = "läuft";
musik.abspielen();
}, 200);
},
//Lautstärke anpassen changeVolume(c) {
musik.lautstärke = c / 100;
wenn (Musik.Lautstärke == 0) {
this.volumeType = "md-volume-aus";
} anders {
this.volumeType = "md-volume-up";
}
},
//URL-Informationen des abzuspielenden Liedes abrufen getMusicList(id) {
lass das = dies;
axios.get("/musicController/getMusicURLInfo/" + id).then(function (res) {
Schalter (Res.Code) {
Fall "0000":
diese.songInfo.url = res.data.url;
dass.GetLyricList(res.data.lyric);
brechen;
Fall "1111":
showMessage("Warnung", res.message);
brechen;
}
});
},
GetLyricList(lrc) {
let lyricsObjArr = [];
const regNewLine = /\n/;
const lineArr = lrc.split(regNewLine); // Array mit Liedtexten für jede Zeile const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/;
lineArr.forEach((item) => {
wenn (Element === "") zurückgeben;
const obj = {};
const Zeit = Element.Match(regTime);
obj.lyric =
item.split("]")[1].trim() === "" ? "" : item.split("]")[1].trim();
obj.time = Zeit
? commonJs.TimeToSeconds(Zeit[0].slice(1, Zeit[0].Länge - 1))
: 0;
obj.uid = Math.random().toString().slice(-6);
wenn (obj.lyric === "") {
console.log("Diese Zeile enthält keinen Liedtext");
} anders {
LiedtextObjArr.push(obj);
}
});
this.lyricInfo = lyricsObjArr.map((item, index) => {
Element.index = Index;
zurückkehren {
...Artikel,
};
});
},
},
};
</Skript>
<style lang="less" scoped>
.Hauptseite {
Breite: 100 %;
Höhe: 100%;
Position: absolut;
Hintergrund: rgba(15, 15, 15, 0,4);
Überlauf: versteckt;
.Hintergrund-Flitter {
Position: absolut;
Z-Index: 0;
Hintergrundwiederholung: keine Wiederholung;
Breite: 100 %;
Höhe: 100%;
oben: 0;
links: 0;
Hintergrundgröße: Abdeckung;
Hintergrundposition: 50 %;
Filter: Unschärfe (8px);
// Rand: -20px;
Deckkraft: 0,7;
Überlauf: versteckt;
Box-Größe: Rahmenbox;
}
.mini spielen {
Position: absolut;
unten: 0;
links: 0;
Breite: 100 %;
Höhe: 72px;
// Hintergrund: #fff;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Polsterung: 6px 0;
Box-Größe: Rahmenbox;
Z-Index: 10;
.songInfo {
Mindestbreite: 360px;
maximale Breite: 480px;
Position: relativ;
Polsterung: 0 18px;
Box-Größe: Rahmenbox;
Anzeige: Flex;
.poster {
Breite: 52px;
Höhe: 52px;
Rahmenradius: 5px;
Rand oben: 4px;
Rand rechts: 20px;
}
.die Info {
Mindestbreite: 280px;
Höhe: 100%;
Zeilenhöhe: 30px;
Schriftgröße: 16px;
}
}
.Steuerungen {
Breite: 280px;
Höhe: 100%;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
img {
Breite: 40px;
Höhe: 40px;
Cursor: Zeiger;
}
.status {
Breite: 40px;
Höhe: 40px;
Rand links: 36px;
Rand rechts: 36px;
Cursor: Zeiger;
}
}
.Fortschrittsbalken {
Position: absolut;
Z-Index: 10;
oben: -5px;
Breite: 100 %;
Höhe: 5px;
Hintergrund: rgba(255, 255, 255, 0,5);
Cursor: Zeiger;
.Fortschrittsbox {
Höhe: 100%;
Hintergrund: #40ce8f;
Position: relativ;
}
}
.rechts-unten {
Position: relativ;
Breite: 420px;
Höhe: 100%;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
.text-div {
Farbe: #fff;
Höhe: 100%;
Zeilenhöhe: 60px;
Rand links: 5px;
Rand rechts: 5px;
}
.Wiedergabeliste {
Position: absolut;
rechts: 0px;
}
A {
Farbe: #333;
}
}
}
.song-cover-lyrics {
Position: relativ;
Breite: 100 %;
Höhe: 100%;
Polsterung unten: 72px;
Box-Größe: Rahmenbox;
Anzeige: Flex;
Überlauf: versteckt;
.Disc-Kontinuer {
Breite: 50%;
Höhe: 100%;
Position: relativ;
.poster {
Position: relativ;
Breite: 280px;
Höhe: 280px;
Randradius: 50 %;
Hintergrund: rgba(255, 255, 255, 0,3);
links: 50%;
oben: 100px;
Rand links: -140px;
Kastenschatten: 0 0 0 12px rgba (255, 255, 255, 0,4);
Animation: Animationen1 12s linear unendlich vorwärts;
Animations-Wiedergabestatus: angehalten;
Überlauf: versteckt;
Rand unten: 160px;
img {
Breite: 100 %;
Höhe: 100%;
}
}
.Liedname {
Breite: 100 %;
Höhe: 40px;
Textausrichtung: zentriert;
Schriftgröße: 32px;
Schriftstärke: 600;
Farbe: #fff;
Zeilenhöhe: 40px;
}
.song-artistsName {
Breite: 100 %;
Höhe: 40px;
Textausrichtung: zentriert;
Schriftgröße: 28px;
Schriftstärke: 600;
Farbe: #fff;
Zeilenhöhe: 40px;
Rand oben: 24px;
}
@keyframes animations1 {
aus {
transformieren: drehen (0 Grad);
}
Zu {
transformieren: drehen (360 Grad);
}
}
}
.Text {
Breite: 50%;
Höhe: 600px;
Position: relativ;
Überlauf: versteckt;
}
}
}
</Stil>
<style lang="less">
.ivu-Schubladenkörper {
.Listencontainer {
Breite: 100 %;
Höhe: 100%;
Überlauf: automatisch;
Position: relativ;
.songInfo {
Breite: 100 %;
Höhe: 42px;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Rand unten: 12px;
Cursor: Zeiger;
img {
Breite: 36px;
Höhe: 36px;
Rahmenradius: 5px;
Rand rechts: 12px;
}
.die Info {
Position: relativ;
Breite: 240px;
Höhe: 36px;
Zeilenhöhe: 18px;
.Name {
Breite: 100 %;
Höhe: 18px;
Schriftgröße: 14px;
Schriftstärke: 600;
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Zeilenhöhe: 18px;
}
.Sänger {
Breite: 100 %;
Höhe: 18px;
Schriftgröße: 12px;
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Zeilenhöhe: 18px;
}
}
}
}
}
</Stil>Liedtextteil (lyricScroll.vue) <Vorlage>
<!--Songtext-->
<div
ref="Musiktext"
Klasse = "Musiktext"
:Stil="{ 'padding-top': paddingTop }"
>
<div Klasse="Musik-Songtext-Elemente" :style="SongtextTop">
<template v-if="lyricsList.length > 0">
<p
v-for="(Element, Index) in Songtextliste"
:Schlüssel="Index"
:data-index="Index"
ref="Songtext"
:Stil="{
Farbe: lyricIndex === Index ? colorLight : Farbe,
'Schriftgröße': Schriftgröße,
}"
>
{{ item.lyric }}
</p>
</Vorlage>
<p style="color: #fff" v-else>Die Liedtexte werden geladen. . . . . </p>
</div>
</div>
</Vorlage>
<Skript>
const COMPONENT_NAME = "scrollen";
Standard exportieren {
Name: KOMPONENTENNAME,
Requisiten: {
// Liedtextliste lyricsList: {
Typ: Array,
Standard: () => [],
},
// Aktueller Liedtextindex lyricIndex: {
Typ: Nummer,
Standard: 0,
},
// Standardfarbe des Liedtextes color: {
Typ: Zeichenfolge,
Standard: "#fff",
},
// Liedtext hervorheben colorcolorLight: {
Typ: Zeichenfolge,
Standard: "#40ce8f",
},
Schriftgröße: {
Typ: Zeichenfolge,
Standard: "16px",
},
Zeilenhöhe: {
Typ: Zeichenfolge,
Standard: "42",
},
Polsterung oben: {
Typ: Zeichenfolge,
Standard: "300px",
},
},
Daten() {
zurückkehren {
top: 0, // Liedtext zentriert // Beispiel für eine Liedtextliste lyricListDemo: [
{
Index: 0,
Liedtext: „Komposition: CMJ“,
Zeit: 0,
},
{
Index: 1,
Liedtext: „Liedtext: Tao Jiu“,
Zeit: 0,29,
},
{
Index: 2,
Liedtext: „Höre den fallenden Blättern im Spätherbst“,
Zeit: 0,89,
},
{
Index: 3,
Text: „Du hörst es und seufzst auf Wiedersehen“,
Zeit: 5.14,
},
{
Index: 4,
Liedtext: „Ich bin allein, um es zu würdigen“,
Zeit: 9.39,
},
{
Index: 5,
Text: "Meer, Berge, Wind und Mond",
Uhrzeit: 13.14 Uhr,
},
],
};
},
montiert() {},
betrachten:
lyricIndex(neuerWert, alterWert) {},
},
berechnet: {
LiedtextTop() {
returniere `transform :translate3d(0, ${(0 - this.lineHeight) *
(this.lyricIndex - this.top)}px, 0);Farbe: ${this.color};Zeilenhöhe: ${
diese.Zeilenhöhe
}px`;
},
},
Methoden: {},
};
</Skript>
<style lang="less" scoped>
/*Liedtextteil*/
.Musik-Songtexte {
Polsterung oben: 300px;
Box-Größe: Rahmenbox;
Überlauf: versteckt;
Textausrichtung: zentriert;
Maskenbild: linearer Farbverlauf(
nach unten,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0,6) 5%,
rgba(255, 255, 255, 1) 15%,
rgba(255, 255, 255, 1) 85%,
rgba(255, 255, 255, 0,6) 95 %,
rgba(255, 255, 255, 0) 100 %
);
.Musik-Songtext-Elemente {
Textausrichtung: zentriert;
Schriftgröße: 16px;
Farbe: #fff;
transformieren: übersetzen3d(0, 0, 0);
Übergang: Transformation 0,6 s Ausklang;
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Leerzeichen: Nowrap;
.An {
Farbe: #40ce8f;
}
}
}
</Stil>Zeitumrechnung JS (timeConversion.js) /**
* @Autor lyq
* @time 21. November 2021 21:08:48
*
* Sekunden in Stunden, Minuten und Sekunden umwandeln * @name TimeToString
* @example Sekunden in Stunden, Minuten und Sekunden umwandeln* @param {String} Sekunden Sekunden*/
const TimeToString = (Sekunden) => {
let param = parseInt(Sekunden);
sei hh = "",
mm = "",
ss = "";
wenn (Param >= 0 und Param < 60) {
Param < 10? (ss = "0" + Param) : (ss = Param);
gibt "00:" + ss zurück;
} sonst wenn (Param >= 60 und Param < 3600) {
mm = parseInt(Param. / 60);
mm < 10 ? (mm = "0" + mm) : mm;
Parameter – parseInt(mm * 60) < 10?
(ss = "0" + String(param - parseInt(mm * 60))) :
(ss = Param – parseInt(mm * 60));
Rückgabewert mm + ":" + ss;
}
}Der grundlegende Front-End-Code ist hier, und das Folgende ist der Code der Schnittstellenlogikschicht des Back-Ends /**
* @Autor: [LiuYanQiang]
* @version: [v1.0]
* @Klassenname: MusicServiceImpl
* @description: [Beschreibung der Funktion dieser Klasse]
* @createTime : [2021/11/16 14:28]
* @updateUser : [LiuYanQiang]
* @updateTime : [2021/11/16 14:28]
* @updateRemark: [Beschreibung dieser Änderung]
*/
@Service
@Slf4j
öffentliche Klasse MusicServiceImpl implementiert MusicService {
@Autowired
privates Umfeld Umfeld;
/*
* @version V1.0
* Titel: getMusicList
* @Autor LiuYanQiang
* @description Erhalte Informationen zu 20 zufällig ausgewählten Songs auf der Hot-Song-Liste* @createTime 2021/11/16 14:32
* @param []
* @return java.util.Map*/
@Überschreiben
öffentliche Liste<Map<String, Objekt>> getMusicList() {
JSONArray-Ergebnisobjekt = null;
//Verketten Sie die URLs und senden Sie die entsprechende Anfrage StringBuffer url = new StringBuffer();
url.append("https://api.vvhan.com/api/rand.music?type=all&sort=Hot Song List");
//Den Rückgabewert der Schnittstelle abrufen String body = HttpUtils.sendGet(url.toString());
Ergebnisobjekt = JSONObject.parseArray(body);
Liste<Map<String, Objekt>> Liste = neue ArrayList<>();
für (int i = 0; i < resultObject.size(); i++) {
HashMap<String, Objekt> map = neues HashMap<String, Objekt>();
JSONObject jsonObject = resultObject.getJSONObject(i);
map.put("Cover", JSONObject.parseObject(jsonObject.get("Album").toString()).getString("picUrl"));
map.put("KünstlerName", JSONObject.parseArray(jsonObject.get("Künstler").toString()).getJSONObject(0).getString("Name"));
map.put("Name", jsonObject.getString("Name"));
map.put("id", jsonObject.getString("id"));
Liste.Hinzufügen(Karte);
}
Zufallsgenerator random = neuer Zufallsgenerator();
int num = random.nextInt(179) % (179 - 0 + 1) + 0;
Liste = Liste.Unterliste(Anzahl, Anzahl + 20);
Liste zurückgeben;
}
/*
* @version V1.0
* Titel: getMusicURLInfo
* @Autor LiuYanQiang
* @description Holen Sie sich die URL-Informationen des Musik-Players * @createTime 2021/11/19 9:22
* @param [Id——Musik-ID]
* @return java.util.List<java.util.Map<java.lang.String,java.lang.Object>>*/
@Überschreiben
öffentliche Map<String, Objekt> getMusicURLInfo(String Id) {
JSONObject-Ergebnisobjekt = null;
//Verketten Sie die URLs und senden Sie die entsprechende Anfrage StringBuffer url = new StringBuffer();
url.append("https://api.vvhan.com/api/music?id=" + Id + "&type=song&media=netease");
//Den Rückgabewert der Schnittstelle abrufen String body = HttpUtils.sendGet(url.toString());
Ergebnisobjekt = JSONObject.parseObject(body);
HashMap<String, Objekt> map = neues HashMap<String, Objekt>();
// Beurteilen Sie, ob die vom Drittanbieter angegebene Musik-URL gültig ist. Wenn sie ungültig ist, ersetzen Sie sie durch die offizielle URL
wenn(dies.istValid(resultObject.get("mp3url").toString())){
map.put("id", resultObject.get("song_id").toString());
map.put("name", resultObject.get("name"));
map.put("Künstlername", resultObject.get("Autor"));
map.put("Abdeckung", resultObject.get("Abdeckung"));
map.put("url", resultObject.get("mp3url"));
map.put("Liedtext", this.getMusicLyricById(Id) != null ? this.getMusicLyricById(Id) : null);
}
anders{
map.put("id", ID);
map.put("url", "https://music.163.com/song/media/outer/url?id="+Id+".mp3");
map.put("Liedtext", this.getMusicLyricById(Id) != null ? this.getMusicLyricById(Id) : null);
}
Rückfahrkarte;
}
/*
* @version V1.0
* Titel: isValid
* @Autor LiuYanQiang
* @description Bestimmen Sie, ob der Link gültig ist* @createTime 2021/11/20 10:23
* @param [strLink——Eingabelink]
* @return Boolescher Wert
* */
öffentliches Boolean ist gültig(String strLink) {
URL-URL;
versuchen {
url = neue URL(strLink);
HttpURLConnection connt = (HttpURLConnection) url.openConnection();
connt.setRequestMethod("HEAD");
String strMessage = connt.getResponseMessage();
if (strMessage.compareTo("Nicht gefunden") == 0) {
gibt false zurück;
}
connt.disconnect();
} Fang (Ausnahme e) {
gibt false zurück;
}
gibt true zurück;
}
/*
* @version V1.0
* Titel: getRandomFiveMusic
* @Autor LiuYanQiang
* @description Spiele 5 Songs nach dem Zufallsprinzip. Rufe nicht zu oft auf, da sonst der Rückruf der NetEase Cloud API anormal ist. * @createTime 2021/11/19 9:08
* @param []
* @return java.util.List<java.util.Map<java.lang.String,java.lang.Object>>*/
@Überschreiben
öffentliche Liste<Map<String, Objekt>> getRandomFiveMusic() {
Liste<Map<String, Objekt>> Liste = neue ArrayList<>();
für (int i = 0; i < 5; i++) {
JSONObject-Ergebnisobjekt = null;
//Verketten Sie die URLs und senden Sie die entsprechende Anfrage StringBuffer url = new StringBuffer();
url.append("https://api.vvhan.com/api/rand.music?type=json&sort=Hot Song List");
//Den Rückgabewert der Schnittstelle abrufen String body = HttpUtils.sendGet(url.toString());
Ergebnisobjekt = JSONObject.parseObject(body);
JSONObject-Info = JSONObject.parseObject(resultObject.get("info").toString());
HashMap<String, Objekt> map = neues HashMap<String, Objekt>();
map.put("id", info.get("id").toString());
map.put("Name", info.get("Name"));
map.put("Künstlername", info.get("Autor"));
map.put("cover", info.get("bildURL"));
map.put("url", info.get("mp3url"));
map.put("Liedtext", this.getMusicLyricById(info.get("id").toString()) != null ? this.getMusicLyricById(info.get("id").toString()) : null);
Liste.Hinzufügen(Karte);
log.info("Anruf erfolgreich" + i + "times");
}
Liste zurückgeben;
}
/*
* @version V1.0
* Titel: getMusicLyricById
* @Autor LiuYanQiang
* @description Songtextinformationen abrufen* @createTime 2021/11/16 19:23
* @param [Id——Musik-ID]
* @return java.lang.String*/
@Überschreiben
öffentliche Zeichenfolge getMusicLyricById(String Id) {
versuchen {
JSONObject-Ergebnisobjekt = null;
//Verketten Sie die URLs und senden Sie die entsprechende Anfrage StringBuffer url = new StringBuffer();
url.append("https://music.163.com/api/song/media?id=" + Id);
//Den Rückgabewert der Schnittstelle abrufen String body = HttpUtils.sendGet(url.toString());
Ergebnisobjekt = JSONObject.parseObject(body);
if (resultObject.get("lyric").toString() != null) {
returniere resultObject.get("lyric").toString();
} anders {
gibt null zurück;
}
} Fang (Ausnahme e) {
e.printStackTrace();
}
gibt null zurück;
}
}Zusammenfassen Dies ist das Ende dieses Artikels über die einfache Implementierung einer Vue-Implementierung der NetEase Cloud Music Player-Schnittstelle. Weitere relevante Inhalte zur Vue NetEase Cloud Music Player-Schnittstelle finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Die Website ist ausgegraut. Kompatibler Code einschließlich Bilder unterstützt alle Browser
>>: 503 Dienst nicht verfügbar Fehlerlösungserklärung
Artikel empfehlen
Lösung für das img-Tag-Problem unter IE10
Finden Sie das Problem Ich habe vorher eine einfa...
Grafische Erläuterung der Lösungen zur Frontend-Verarbeitung kleiner Symbole
Vorwort Bevor wir mit diesem Artikel beginnen, be...
jQuery implementiert die Funktion zum Hinzufügen und Löschen von Mitarbeiterinformationen
In diesem Artikel wird der spezifische Code von j...
So verwenden Sie den Linux-Befehl whatis
01. Befehlsübersicht Der Befehl whatis sucht in e...
Linux-Befehlszeilenoperation Hochladen und Herunterladen von Dateien in der Baidu-Cloud
Inhaltsverzeichnis 0. Hintergrund 1. Installation...
Eine kurze Analyse der SpringBoot-Verpackung und des Hochladens in Docker sowie der Implementierung der Bereitstellung mehrerer Instanzen (IDEA-Version)
Kürzlich fragte mich ein Freund, ob ich schon ein...
Beispielcode zum Festlegen des Beschriftungsstils mithilfe des CSS-Selektors
CSS-Selektoren Durch Festlegen des Stils für das ...
uniapp realisiert die Aufnahme-Upload-Funktion
Inhaltsverzeichnis uni-app Einführung HTML-Teil j...
Nginx-Konfiguration und -Kompatibilität mit der Codeanalyse der HTTP-Implementierung
Generieren Sie SSL-Schlüssel und CSR-Datei mit Op...
Webdesign-Erfahrung: Effizientes Schreiben von Webcode
Ursprünglich sollte dieses siebte Kapitel eine aus...
So verwenden Sie nginx, um bestimmte URL-Anfragen durch reguläre Ausdrücke abzufangen
Nginx-Server nginx ist ein ausgezeichneter Webser...
Koexistenz von Python2 und Python3 unter einem CentOS7-System
Der erste Schritt besteht darin, die Versionsnumm...
Lösung für den Fehler der Remoteverbindung zur MySQL-Datenbank in der Linux-Konfiguration
Heute habe ich eine Frage zur Konfiguration einer...
MySQL-Einstellungscode für die grüne Version und Details zum Fehler 1067
MySQL-Einstellungscode für grüne Version und Fehl...
Verwenden Sie Node-Media-Server, um einen einfachen Streaming-Media-Server zu erstellen
Zeichnen Sie einige der Prozesse der Verwendung d...