首頁  >  文章  >  web前端  >  uniapp中如何實現音樂播放器和歌詞顯示

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

王林
王林原創
2023-10-22 08:16:461736瀏覽

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位址。 playpauseended事件分別對應音樂開始播放、暫停和播放完成時觸發的方法。

  1. 歌詞顯示的實作

接下來,我們透過自訂元件的方式來實作歌詞的顯示。首先,建立一個名為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屬性定義了兩個屬性,分別是 lyriccurrentIndexlyric屬性用於接收歌詞數組,currentIndex屬性用於表示目前播放的歌詞索引。 computed屬性中的lyricLines計算屬性將歌詞陣列轉換為只包含歌詞文字的新陣列。在模板中,我們使用v-for指令遍歷歌詞數組,並使用:class指令動態新增active類別來實現目前播放歌詞的高亮顯示。

  1. 頁面中使用音樂播放器和歌詞顯示

將音樂播放器和歌詞顯示元件引入到需要使用的頁面中,程式碼如下:

<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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn