Comment implémenter le lecteur de musique et l'affichage des paroles dans Uniapp

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.

1. Implémentation du lecteur de musique

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 Le composant est utilisé. Pour lire de la musique, spécifiez l'adresse URL de la musique via l'attribut 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事件分别对应音乐开始播放、暂停和播放完成时触发的方法。

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>

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

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

Implémentation de l'affichage des paroles
🎜Ensuite, nous implémentons l'affichage des paroles via des composants personnalisés. Tout d'abord, créez un composant personnalisé nommé 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. 🎜
🎜Utilisez le lecteur de musique et l'affichage des paroles dans la page🎜🎜🎜Introduisez les composants du lecteur de musique et de l'affichage des paroles dans la page que vous devez utiliser, le code est le suivant : 🎜rrreee🎜Dans le au-dessus du code, lyric
dans le composant code>lyric reçoit un tableau de paroles et transmet l'index des paroles en cours de lecture à 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!