日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

uniapp中如何實(shí)現(xiàn)音樂(lè)播放器和歌詞顯示

在uniapp中，可以通過(guò)使用uni-player組件和自定義組件的方式實(shí)現(xiàn)音樂(lè)播放器和歌詞顯示。本文將具體介紹如何使用uni-player組件實(shí)現(xiàn)音樂(lè)的播放和如何自定義組件來(lái)顯示歌詞，并提供相應(yīng)的代碼示例。

音樂(lè)播放器的實(shí)現(xiàn)

首先，我們需要在uniapp的頁(yè)面中引入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' // 音樂(lè)的URL地址
      }
    },
    methods: {
      onPlay() {
        // 音樂(lè)開(kāi)始播放時(shí)觸發(fā)的方法
      },
      onPause() {
        // 音樂(lè)暫停時(shí)觸發(fā)的方法
      },
      onEnded() {
        // 音樂(lè)播放完成時(shí)觸發(fā)的方法
      }
    }
  }
</script>

登錄后復(fù)制

在上述代碼中，uni-player組件用于播放音樂(lè)，通過(guò)src屬性指定音樂(lè)的URL地址。play、pause和ended事件分別對(duì)應(yīng)音樂(lè)開(kāi)始播放、暫停和播放完成時(shí)觸發(fā)的方法。

歌詞顯示的實(shí)現(xiàn)

接下來(lái)，我們通過(guò)自定義組件的方式來(lái)實(shí)現(xiàn)歌詞的顯示。首先，創(chuàng)建一個(gè)名為lyric的自定義組件，在src文件夾下創(chuàng)建components文件夾，并在該文件夾下創(chuàng)建lyric文件夾，最后在lyric文件夾中創(chuàng)建一個(gè)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>

登錄后復(fù)制

在上述代碼中，我們通過(guò)lyric組件的props屬性定義了兩個(gè)屬性，分別是lyric和currentIndex。lyric屬性用于接收歌詞數(shù)組，currentIndex屬性用于表示當(dāng)前播放的歌詞索引。computed屬性中的lyricLines計(jì)算屬性將歌詞數(shù)組轉(zhuǎn)換為只包含歌詞文本的新數(shù)組。在模板中，我們使用v-for指令遍歷歌詞數(shù)組，使用:class指令動(dòng)態(tài)添加active類來(lái)實(shí)現(xiàn)當(dāng)前播放歌詞的高亮顯示。

頁(yè)面中使用音樂(lè)播放器和歌詞顯示

將音樂(lè)播放器和歌詞顯示組件引入到需要使用的頁(yè)面中，代碼如下：

<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', // 音樂(lè)的URL地址
        lyric: [
          { time: '00:00', text: '歌詞第一行' },
          { time: '00:05', text: '歌詞第二行' },
          // ...
        ],
        currentIndex: 0 // 當(dāng)前播放的歌詞索引
      }
    },
    methods: {
      onPlay() {
        // 音樂(lè)開(kāi)始播放時(shí)觸發(fā)的方法
      },
      onPause() {
        // 音樂(lè)暫停時(shí)觸發(fā)的方法
      },
      onEnded() {
        // 音樂(lè)播放完成時(shí)觸發(fā)的方法
      }
    }
  }
</script>

登錄后復(fù)制

在上述代碼中，lyric組件中的lyric屬性接收了一個(gè)歌詞數(shù)組，并通過(guò):currentIndex屬性將當(dāng)前播放的歌詞索引傳遞給lyric組件。音樂(lè)播放器和歌詞顯示組件可以同時(shí)在頁(yè)面中使用。

以上就是在uniapp中實(shí)現(xiàn)音樂(lè)播放器和歌詞顯示的具體步驟和代碼示例。通過(guò)使用uni-player組件和自定義組件，我們可以輕松實(shí)現(xiàn)音樂(lè)的播放和歌詞的顯示功能。

以上就是uniapp中如何實(shí)現(xiàn)音樂(lè)播放器和歌詞顯示的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！