ユニアプリで音楽プレーヤーと歌詞表示を実装する方法
ユニアプリでは、ユニプレーヤーコンポーネントとカスタムコンポーネントの歌詞表示を使用して、音楽プレーヤーと歌詞を実装できます。この記事では、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 サイトの他の関連記事を参照してください。