Heim >
Artikel > WeChat-Applet > Werfen Sie in diesen Jahren einen Blick auf die entsprechende Wiedergabe des WeChat-Applets, das NetEase Cloud Music imitiert
Werfen Sie in diesen Jahren einen Blick auf die entsprechende Wiedergabe des WeChat-Applets, das NetEase Cloud Music imitiert
Der Autor ist ein Front-End-Soldat. Nachdem ich das Miniprogramm eine Zeit lang studiert hatte, beschloss ich, persönlich eine mobile Software zu entwickeln Ich habe eine Handy-Software nachgeahmt, um meine Fähigkeiten zu üben. Ich liebe auch Musik und habe festgestellt, dass die kleinen Programme verschiedener Musikplattformen relativ einfach sind. Deshalb habe ich diese Richtung zum Nachahmen und Lernen gewählt. Dabei bin ich auch auf viele Probleme gestoßen. Nachdem ich diese Probleme gelöst habe, habe ich auch einige Gewinne erzielt. Heute werde ich in diesem kleinen Programm die verschiedenen Probleme und Lösungen für den schwierigsten Teil der Musikwiedergabe mit Ihnen teilen.
Zunächst möchte ich dem API-Anbieter dieses Projekts, Binaryify , dafür danken, dass er sich für dieses Projekt entschieden hat, denn die Back-End-API wird von einem großen Mann bereitgestellt. Wenn Sie Daten benötigen, müssen Sie nur eine Schnittstelle initiieren Anfragen. Es ist eher für Anfänger wie mich geeignet. Schreiben Sie einfach eine einfache Front-End-Logik.
Da sich die Wiedergabeseite um viele Dinge kümmern muss (z. B. die Verarbeitung und Anzeige von Texten, schnelles Vor- und Zurückspulen des Fortschrittsbalkens usw.) und es viele Fallstricke gibt, ist es wichtig, sie so klar wie möglich zu beschreiben Dieser Artikel konzentriert sich hauptsächlich auf die Einführung und Musikwiedergabe Verschiedene Vorgänge im Zusammenhang mit diesem Projekt werden auf anderen Seiten dieses Projekts ausführlich beschrieben. Vielen Dank, Leser, für Ihr Verständnis.
Projektschnittstellenvorschau:
Git-Adresse
github.com/shengliangg…
Yuncun und Videomodule wurden noch nicht entwickelt, wenn ich Zeit habe Ich werde es aktualisieren, wenn ich in Zukunft Zeit habe. Das Schreiben eines Projektnutzungsdokuments beginnt offiziell. In mehreren Schnittstellenanfragen zur Musikwiedergabe müssen fast alle auf allen Seiten von enthalten sein In diesem Projekt existiert die Wiedergabeseite als unabhängige Seite. Wenn andere Seiten zur Wiedergabeseite springen, tragen sie die
Song-ID
Schnittstellenkapselung
Der Einfachheit halber verwendet dieses Projekt viele Schnittstellenanforderungen. Ich habe es in utils gekapselt. Verweisen Sie in der Datei api.js im Ordner auf die Schnittstellenverwaltungsdatei auf der Seite.
Hier werden nur zwei auf dieser Seite verwendete Anforderungs-APIs angezeigt. Sie können sie verwenden, indem Sie sie in die Seite einfügen, die Schnittstellenanforderungen erfordert.
Beispiel für das Springen zu anderen Seiten: 🎜Andere Seiten springen zur Wiedergabeseite und tragen den MusicId-Parameter🎜
//格式化歌词
parseLyric: function (text) {
let result = [];
let lines = text.split('\n'), //切割每一行
pattern = /\[\d{2}:\d{2}.\d+\]/g;//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]
// console.log(lines);
//去掉不含时间的行
while (!pattern.test(lines[0])) {
lines = lines.slice(1);
};
//上面用'\n'生成数组时，结果中最后一个为空元素，这里将去掉
lines[lines.length - 1].length === 0 && lines.pop();
lines.forEach(function (v /*数组元素值*/, i /*元素索引*/, a /*数组本身*/) {
//提取出时间[xx:xx.xx]
var time = v.match(pattern),
//提取歌词
value = v.replace(pattern, '');
// 因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔
time.forEach(function (v1, i1, a1) {
//去掉时间里的中括号得到xx:xx.xx
var t = v1.slice(1, -1).split(':');
//将结果压入最终数组
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
});
});
// 最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词
result.sort(function (a, b) {
return a[0] - b[0];
});
return result;
},复制代码
onLoad Lebenszyklus
🎜In der Lebenszyklusfunktion onLoad von play.js erhalten Sie den options übergeben wurde musicId diesen Parameter und rufen Sie die Funktion play()🎜
sliceNull: function (lrc) {
var result = []
for (var i = 0; i < lrc.length; i++) {
if (lrc[i][1] !== "") {
result.push(lrc[i]);
}
}
return result
},复制代码
play function🎜🎜< /h3>🎜play()Die Funktion erfordert einen formalen Parameter: musicId Dieser formale Parameter wird in nachfolgenden Schnittstellenanforderungen verwendet🎜
//格式化歌词
parseLyric: function (text) {
let result = [];
let lines = text.split('\n'), //切割每一行
pattern = /\[\d{2}:\d{2}.\d+\]/g;//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]
// console.log(lines);
//去掉不含时间的行
while (!pattern.test(lines[0])) {
lines = lines.slice(1);
};
//上面用'\n'生成数组时，结果中最后一个为空元素，这里将去掉
lines[lines.length - 1].length === 0 && lines.pop();
lines.forEach(function (v /*数组元素值*/, i /*元素索引*/, a /*数组本身*/) {
//提取出时间[xx:xx.xx]
var time = v.match(pattern),
//提取歌词
value = v.replace(pattern, '');
// 因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔
time.forEach(function (v1, i1, a1) {
//去掉时间里的中括号得到xx:xx.xx
var t = v1.slice(1, -1).split(':');
//将结果压入最终数组
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
});
});
// 最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词
result.sort(function (a, b) {
return a[0] - b[0];
});
return result;
},复制代码
歌词去除空白行
sliceNull: function (lrc) {
var result = []
for (var i = 0; i < lrc.length; i++) {
if (lrc[i][1] !== "") {
result.push(lrc[i]);
}
}
return result
},复制代码
Das obige ist der detaillierte Inhalt vonWerfen Sie in diesen Jahren einen Blick auf die entsprechende Wiedergabe des WeChat-Applets, das NetEase Cloud Music imitiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Hier werden nur zwei auf dieser Seite verwendete Anforderungs-APIs angezeigt. Sie können sie verwenden, indem Sie sie in die Seite einfügen, die Schnittstellenanforderungen erfordert. 
