uniappに音楽プレーヤーと歌詞表示を実装する方法-uni-app-php.cn

uniappに音楽プレーヤーと歌詞表示を実装する方法

王林

リリース： 2023-10-22 08:16:46

オリジナル

1807 人が閲覧しました

uniappに音楽プレーヤーと歌詞表示を実装する方法

ユニアプリで音楽プレーヤーと歌詞表示を実装する方法

ユニアプリでは、ユニプレーヤーコンポーネントとカスタムコンポーネントの歌詞表示を使用して、音楽プレーヤーと歌詞を実装できます。この記事では、Uni-Player コンポーネントを使用して音楽再生を実現する方法と、コンポーネントをカスタマイズして歌詞を表示する方法と、対応するコード例を詳しく紹介します。

音楽プレーヤーの実装

まず、uni-player コンポーネントを uniapp ページに導入する必要があります。コードは次のとおりです:

<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 コンポーネントが使用されており、音楽の URL アドレスは src 属性で指定されています。 play、pause、および ended イベントは、それぞれ音楽の再生開始時、一時停止時、および終了時にトリガーされるメソッドに対応します。

歌詞表示の実装

次に、カスタムコンポーネントを使用して歌詞の表示を実装します。まず、lyric という名前のカスタムコンポーネントを作成し、src フォルダーの下に components フォルダーを作成し、そのフォルダーの下に を作成します。最後に、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 属性を通じて 2 つのプロパティを定義します。 歌詞とcurrentIndexです。 lyric 属性は歌詞配列を受け取るために使用され、currentIndex 属性は現在再生中の歌詞インデックスを表すために使用されます。 computedlyricLinesプロパティ内の計算プロパティは、歌詞配列を歌詞テキストのみを含む新しい配列に変換します。テンプレートでは、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 で音楽プレーヤーと歌詞表示を実装するための具体的な手順とコード例です。ユニプレーヤーコンポーネントやカスタムコンポーネントを利用することで、音楽再生や歌詞表示機能を簡単に実装できます。

以上がuniappに音楽プレーヤーと歌詞表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。