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.
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
digunakan untuk memainkan muzik dan alamat URL muzik ditentukan melalui src< /kod> atribut. Acara <code>main
, jeda
dan ended
masing-masing sepadan dengan kaedah yang dicetuskan apabila muzik mula dimainkan, dijeda dan selesai. uni-player
组件用于播放音乐,通过src
属性指定音乐的URL地址。play
、pause
和ended
事件分别对应音乐开始播放、暂停和播放完成时触发的方法。接下来,我们通过自定义组件的方式来实现歌词的显示。首先,创建一个名为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
类来实现当前播放歌词的高亮显示。
将音乐播放器和歌词显示组件引入到需要使用的页面中,代码如下:
<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
Pelaksanaan paparan lirik
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. #🎜🎜#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!