uniapp中如何实现音乐播放器和歌词显示-uni-app-PHP中文网

uniapp中如何实现音乐播放器和歌词显示

王林

发布： 2023-10-22 08:16:46

原创

3243人浏览过

uniapp中如何实现音乐播放器和歌词显示

在uniapp中，可以通过使用uni-player组件和自定义组件的方式实现音乐播放器和歌词显示。本文将具体介绍如何使用uni-player组件实现音乐的播放和如何自定义组件来显示歌词，并提供相应的代码示例。

音乐播放器的实现

首先，我们需要在uniapp的页面中引入uni-player组件，代码如下：

<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事件分别对应音乐开始播放、暂停和播放完成时触发的方法。

歌词显示的实现

接下来，我们通过自定义组件的方式来实现歌词的显示。首先，创建一个名为lyric的自定义组件，在src文件夹下创建components文件夹，并在该文件夹下创建lyric文件夹，最后在lyric文件夹中创建一个lyric.vue文件。lyric.vue文件的代码如下：

歌歌AI写歌

支持人声克隆的AI音乐创作平台，歌歌AI写歌 - 人人都是音乐家

查看详情

<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组件。音乐播放器和歌词显示组件可以同时在页面中使用。

以上就是在uniapp中实现音乐播放器和歌词显示的具体步骤和代码示例。通过使用uni-player组件和自定义组件，我们可以轻松实现音乐的播放和歌词的显示功能。

以上就是uniapp中如何实现音乐播放器和歌词显示的详细内容，更多请关注php中文网其它相关文章！