Heim > Artikel > Web-Frontend > So implementieren Sie den Musikplayer und die Liedtextanzeige in Uniapp
So implementieren Sie den Musikplayer und die Liedtextanzeige in Uniapp
In Uniapp können Sie den Musikplayer und die Liedtextanzeige mithilfe der Uni-Player-Komponente und der benutzerdefinierten Komponente implementieren. In diesem Artikel wird detailliert beschrieben, wie Sie die Uni-Player-Komponente zum Realisieren der Musikwiedergabe verwenden und wie Sie die Komponente für die Anzeige von Liedtexten anpassen. Außerdem werden entsprechende Codebeispiele bereitgestellt.
Zuerst müssen wir die Uni-Player-Komponente in die Uniapp-Seite einführen. Der Code lautet wie folgt:
<template> <view> <uni-player :src="musicSrc" @play="onPlay" @pause="onPause" @ended="onEnded"></uni-player> </view> </template> <script> export default { data() { return { musicSrc: 'http://example.com/music.mp3' // 音乐的URL地址 } }, methods: { onPlay() { // 音乐开始播放时触发的方法 }, onPause() { // 音乐暂停时触发的方法 }, onEnded() { // 音乐播放完成时触发的方法 } } } </script>
Im obigen Code der uni-player
Komponente wird verwendet. Um Musik abzuspielen, geben Sie die URL-Adresse der Musik über das Attribut src
an. Die Ereignisse play
, pause
und ended
entsprechen den Methoden, die ausgelöst werden, wenn die Musikwiedergabe beginnt, angehalten wird bzw. die Wiedergabe beendet wird. uni-player
组件用于播放音乐,通过src
属性指定音乐的URL地址。play
、pause
和ended
事件分别对应音乐开始播放、暂停和播放完成时触发的方法。
接下来,我们通过自定义组件的方式来实现歌词的显示。首先,创建一个名为lyric
的自定义组件,在src
文件夹下创建components
文件夹,并在该文件夹下创建lyric
文件夹,最后在lyric
文件夹中创建一个lyric.vue
文件。lyric.vue
文件的代码如下:
<template> <view class="lyric"> <text v-for="(line, index) in lyricLines" :key="index" :class="{ active: currentIndex === index }">{{ line }}</text> </view> </template> <script> export default { props: { lyric: { type: Array, default: [] }, currentIndex: { type: Number, default: 0 } }, computed: { lyricLines() { return this.lyric.map(item => item.text) } } } </script> <style> .lyric { height: 300rpx; overflow: hidden; line-height: 80rpx; text-align: center; font-size: 32rpx; } .active { color: red; } </style>
在上述代码中,我们通过lyric
组件的props属性定义了两个属性,分别是lyric
和currentIndex
。lyric
属性用于接收歌词数组,currentIndex
属性用于表示当前播放的歌词索引。computed
属性中的lyricLines
计算属性将歌词数组转换为只包含歌词文本的新数组。在模板中,我们使用v-for
指令遍历歌词数组,使用:class
指令动态添加active
类来实现当前播放歌词的高亮显示。
将音乐播放器和歌词显示组件引入到需要使用的页面中,代码如下:
<template> <view> <lyric :lyric="lyric" :currentIndex="currentIndex"></lyric> <uni-player :src="musicSrc" @play="onPlay" @pause="onPause" @ended="onEnded"></uni-player> </view> </template> <script> import lyric from '@/components/lyric/lyric.vue' export default { components: { lyric }, data() { return { musicSrc: 'http://example.com/music.mp3', // 音乐的URL地址 lyric: [ { time: '00:00', text: '歌词第一行' }, { time: '00:05', text: '歌词第二行' }, // ... ], currentIndex: 0 // 当前播放的歌词索引 } }, methods: { onPlay() { // 音乐开始播放时触发的方法 }, onPause() { // 音乐暂停时触发的方法 }, onEnded() { // 音乐播放完成时触发的方法 } } } </script>
在上述代码中,lyric
组件中的lyric
属性接收了一个歌词数组,并通过:currentIndex
属性将当前播放的歌词索引传递给lyric
lyric
, erstellen Sie einen Ordner components
unter dem Ordner src
und erstellen Sie einen Ordner lyric
und erstellen Sie schließlich eine Datei lyric.vue
im Ordner lyric
. Der Code der Datei lyric.vue
lautet wie folgt: 🎜rrreee🎜Im obigen Code definieren wir zwei Eigenschaften über das props-Attribut der Komponente lyric
, nämlich lyric
wird verwendet, um das Liedtext-Array zu empfangen, und das Attribut currentIndex
wird verwendet, um den Index der aktuell gespielten Liedtexte darzustellen. Die berechnete Eigenschaft lyricLines
in der Eigenschaft computed
konvertiert das Liedtext-Array in ein neues Array, das nur den Liedtext enthält. In der Vorlage verwenden wir die Direktive v-for
, um das Lyrics-Array zu durchlaufen, und die Direktive :class
, um die Klasse active
dynamisch hinzuzufügen um eine hochwertige Wiedergabe des aktuell wiedergegebenen Liedtextes zu erreichen. 🎜:currentIndexlyric-Attribut. /code>Komponente. Die Komponenten Musikplayer und Liedtextanzeige können gleichzeitig auf der Seite verwendet werden. 🎜🎜Das Obige sind die spezifischen Schritte und Codebeispiele zum Implementieren des Musikplayers und der Liedtextanzeige in Uniapp. Durch die Verwendung von Uni-Player-Komponenten und benutzerdefinierten Komponenten können wir problemlos Musikwiedergabe- und Liedtextanzeigefunktionen implementieren. 🎜
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Musikplayer und die Liedtextanzeige in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!