Bagaimana untuk melaksanakan paparan pemain muzik dan lirik dalam uniapp

Cara melaksanakan pemain muzik dan paparan lirik dalam uniapp

Dalam uniapp, anda boleh menggunakan komponen uni-pemain dan komponen tersuai Cara untuk melaksanakan pemain muzik dan paparan lirik. Artikel ini akan memperkenalkan secara terperinci cara menggunakan komponen uni-pemain untuk merealisasikan main balik muzik dan cara menyesuaikan komponen untuk memaparkan lirik, dan memberikan contoh kod yang sepadan.

1. Pelaksanaan pemain muzik

Pertama sekali, kita perlu memperkenalkan komponen uni-player ke dalam halaman uniapp, kodnya adalah sebagai berikut: #🎜🎜 #

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

Salin selepas log masuk

在上述代码中，我们通过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>

Salin selepas log masuk

在上述代码中，lyric组件中的lyric属性接收了一个歌词数组，并通过:currentIndex属性将当前播放的歌词索引传递给lyricPelaksanaan paparan lirik

Seterusnya, kami melaksanakan paparan lirik melalui komponen tersuai. Mula-mula, buat komponen tersuai bernama lirik, buat folder komponen di bawah folder src dan buat folder lirik , dan akhirnya buat fail lyric.vue dalam folder lyric. Kod fail lyric.vue adalah seperti berikut: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mentakrifkan dua sifat melalui atribut props lirik komponen, masing-masing ialah lirik dan currentIndex. Atribut lirik digunakan untuk menerima tatasusunan lirik dan atribut currentIndex digunakan untuk mewakili indeks lirik yang sedang dimainkan. Sifat lyricLines yang dikira dalam sifat computed menukar tatasusunan lirik kepada tatasusunan baharu yang mengandungi hanya teks lirik. Dalam templat, kami menggunakan arahan v-for untuk melintasi tatasusunan lirik dan menggunakan arahan :class untuk menambah kelas aktif secara dinamik untuk mencapai main balik peringkat tinggi bagi lirik yang sedang dimainkan. #🎜🎜#
#🎜🎜# Gunakan pemain muzik dan paparan lirik dalam halaman #🎜🎜##🎜🎜##🎜🎜#Perkenalkan pemain muzik dan komponen paparan lirik ke halaman yang anda perlu digunakan Dalam halaman, kod adalah seperti berikut: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, atribut lyric dalam komponen lyric menerima tatasusunan lirik dan menghantarnya melalui atribut :currentIndex menghantar indeks lirik yang sedang dimainkan kepada komponen lirik. Komponen paparan pemain muzik dan lirik boleh digunakan dalam halaman pada masa yang sama. #🎜🎜##🎜🎜#Di atas ialah langkah dan contoh kod khusus untuk melaksanakan pemain muzik dan paparan lirik dalam uniapp. Dengan menggunakan komponen uni-pemain dan komponen tersuai, kami boleh melaksanakan fungsi main balik muzik dan paparan lirik dengan mudah. #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan paparan pemain muzik dan lirik dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!