uniapp中如何實現音樂播放器和歌詞顯示

uniapp中如何實現音樂播放器和歌詞顯示

在uniapp中，可以透過使用uni-player元件和自訂元件的方式來實現音樂播放器和歌詞顯示。本文將具體介紹如何使用uni-player元件實現音樂的播放和如何自訂元件來顯示歌詞，並提供相應的程式碼範例。

1. 音樂播放器的實作

首先，我們需要在uniapp的頁面中引入uni-player元件，程式碼如下：

<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>

在上述程式碼中，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元件。音樂播放器和歌詞顯示元件可以同時在頁面中使用。

以上就是在uniapp中實作音樂播放器和歌詞顯示的具體步驟和程式碼範例。透過使用uni-player元件和自訂元件，我們可以輕鬆實現音樂的播放和歌詞的顯示功能。

以上是uniapp中如何實現音樂播放器和歌詞顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！