Comment implémenter le lecteur de musique et l'affichage des paroles dans uniapp
Dans uniapp, vous pouvez implémenter le lecteur de musique et l'affichage des paroles en utilisant le composant uni-player et le composant personnalisé. Cet article présentera en détail comment utiliser le composant uni-player pour réaliser la lecture de musique et comment personnaliser le composant pour afficher les paroles, et fournira des exemples de code correspondants.
Tout d'abord, nous devons introduire le composant uni-player dans la page uniapp, le code est le suivant :
<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>
Dans le code ci-dessus, le uni-player</code > Le composant est utilisé. Pour lire de la musique, spécifiez l'adresse URL de la musique via l'attribut <code>src
. Les événements play
, pause
et ended
correspondent aux méthodes déclenchées lorsque la musique commence à jouer, est mise en pause et la lecture est terminée respectivement. 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
lyric
, créez un dossier components
sous le dossier src
et créez le dossier lyric
. , et enfin créez un fichier lyric.vue
dans le dossier lyric
. Le code du fichier lyric.vue
est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous définissons deux propriétés via l'attribut props du composant lyric
, à savoir lyric et <code>currentIndex
. L'attribut lyric
est utilisé pour recevoir le tableau des paroles, et l'attribut currentIndex
est utilisé pour représenter l'index des paroles actuellement jouées. La propriété calculée lyricLines
dans la propriété computed
convertit le tableau des paroles en un nouveau tableau contenant uniquement le texte des paroles. Dans le modèle, nous utilisons la directive v-for
pour parcourir le tableau des paroles, et utilisons la directive :class
pour ajouter dynamiquement la classe active
pour obtenir une lecture de haut niveau des paroles en cours de lecture en surbrillance. 🎜lyric:currentIndex code> attribut. /code>Composant. Les composants du lecteur de musique et de l’affichage des paroles peuvent être utilisés simultanément dans la page. 🎜🎜Ci-dessus sont les étapes spécifiques et les exemples de code pour implémenter le lecteur de musique et l'affichage des paroles dans uniapp. En utilisant des composants Uni-Player et des composants personnalisés, nous pouvons facilement implémenter des fonctions de lecture de musique et d'affichage des paroles. 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!