uniapp에서 음악 플레이어 및 가사 표시를 구현하는 방법

유니앱에서 뮤직 플레이어 및 가사 표시 구현 방법

유니앱에서는 유니플레이어 컴포넌트와 커스텀 컴포넌트를 이용하여 뮤직 플레이어 및 가사 표시를 구현할 수 있습니다. 이 기사에서는 유니플레이어 구성 요소를 사용하여 음악 재생을 구현하는 방법과 구성 요소를 사용자 정의하여 가사를 표시하는 방법을 자세히 소개하고 해당 코드 예제를 제공합니다.

1. 뮤직 플레이어 구현

우선 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</code > 컴포넌트를 사용하여 음악을 재생하려면 <code>src 속성을 ​​통해 음악의 URL 주소를 지정합니다. play, pause 및 ended 이벤트는 각각 음악 재생 시작, 일시 정지 및 완료 시 트리거되는 메서드에 해당합니다. 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

가사 표시 구현
🎜다음으로 커스텀 컴포넌트를 통해 가사 표시를 구현합니다. 먼저 lyric이라는 사용자 정의 구성 요소를 만들고, src 폴더 아래에 com넌트 폴더를 만들고, lyric 폴더를 만듭니다. , 마지막으로 lyric 폴더에 lyric.vue 파일을 만듭니다. lyric.vue 파일의 코드는 다음과 같습니다. 🎜rrreee🎜위 코드에서는 lyric 컴포넌트의 props 속성을 통해 두 가지 속성, 즉 가사 및 <code>currentIndex. lyric 속성은 가사 배열을 받는 데 사용되고, currentIndex 속성은 현재 재생 중인 가사 인덱스를 나타내는 데 사용됩니다. computed 속성의 lyricLines 계산 속성은 가사 배열을 가사 텍스트만 포함하는 새 배열로 변환합니다. 템플릿에서는 v-for 지시문을 사용하여 가사 배열을 순회하고 :class 지시문을 사용하여 active 클래스를 동적으로 추가합니다. 현재 재생 중인 가사를 높은 수준으로 재생합니다. 🎜
🎜페이지에서 음악 플레이어 및 가사 표시 사용🎜🎜🎜사용해야 하는 페이지에 음악 플레이어 및 가사 표시 구성 요소를 도입하세요. 코드는 다음과 같습니다. 🎜rrreee🎜에서 위 코드에서 lyric
구성 요소의 lyric 속성은 가사 배열을 수신하고 :currentIndex를 통해 현재 재생 중인 가사 인덱스를 <code>lyric 속성./코드>구성 요소. 음악 플레이어와 가사 표시 구성 요소는 페이지에서 동시에 사용할 수 있습니다. 🎜🎜위는 유니앱에서 뮤직 플레이어와 가사 표시를 구현하는 구체적인 단계와 코드 예시입니다. 유니플레이어 컴포넌트와 커스텀 컴포넌트를 사용하여 음악 재생 및 가사 표시 기능을 쉽게 구현할 수 있습니다. 🎜

위 내용은 uniapp에서 음악 플레이어 및 가사 표시를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!