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.

1. Implementierung des Musik-Players

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</code > Komponente wird verwendet. Um Musik abzuspielen, geben Sie die URL-Adresse der Musik über das Attribut <code>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事件分别对应音乐开始播放、暂停和播放完成时触发的方法。

2. 歌词显示的实现

接下来，我们通过自定义组件的方式来实现歌词的显示。首先，创建一个名为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类来实现当前播放歌词的高亮显示。

3. 页面中使用音乐播放器和歌词显示

将音乐播放器和歌词显示组件引入到需要使用的页面中，代码如下：

<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

Implementierung der Liedtextanzeige
🎜Als nächstes implementieren wir die Anzeige von Liedtexten durch benutzerdefinierte Komponenten. Erstellen Sie zunächst eine benutzerdefinierte Komponente mit dem Namen 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 und <code>currentIndex. Das Attribut 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. 🎜
🎜Verwenden Sie den Musik-Player und die Anzeige von Liedtexten auf der Seite obiger Code: lyric in der Komponente code>lyric empfängt ein Liedtext-Array und übergibt den aktuell wiedergegebenen Liedtextindex über :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!