How to implement music player and lyrics display in uniapp

How to implement music player and lyrics display in uniapp

In uniapp, you can implement music player and lyrics by using uni-player component and custom component Lyrics displayed. This article will introduce in detail how to use the uni-player component to realize music playback and how to customize the component to display lyrics, and provide corresponding code examples.

1. Implementation of music player

First, we need to introduce the uni-player component into the uniapp page, the code is as follows:

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

In the above In the code, the uni-player component is used to play music, and the URL address of the music is specified through the src attribute. The play, pause, and ended events correspond to the methods triggered when music starts to play, is paused, and is completed, respectively.

2. Implementation of lyrics display

Next, we implement the display of lyrics through custom components. First, create a custom component named lyric, create a components folder under the src folder, and create under that folder lyric folder, and finally create a lyric.vue file in the lyric folder. The code of the lyric.vue file is as follows:

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

In the above code, we define two properties through the props attribute of the lyric component, which are lyric and currentIndex. The lyric attribute is used to receive the lyrics array, and the currentIndex attribute is used to represent the currently playing lyrics index. computedlyricLinesComputed properties in properties convert the lyrics array into a new array containing only the lyrics text. In the template, we use the v-for instruction to traverse the lyrics array, and use the :class instruction to dynamically add the active class to highlight the currently playing lyrics.

3. Use the music player and lyrics display in the page

Introduce the music player and lyrics display components into the page you need to use, the code is as follows:

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

In the above code, the lyric property in the lyric component receives a lyrics array and passes the currently playing lyrics index through the :currentIndex property. Give lyric components. The music player and lyrics display components can be used in the page at the same time.

The above are the specific steps and code examples to implement music player and lyrics display in uniapp. By using uni-player components and custom components, we can easily implement music playback and lyrics display functions.

The above is the detailed content of How to implement music player and lyrics display in uniapp. For more information, please follow other related articles on the PHP Chinese website!