ホームページ > 記事 > ウェブフロントエンド > Vue3 を使用してプレーヤーを作成する方法を段階的に説明します。
この記事は、Vue3 に関する関連知識を提供します。主に、Vue3 でプレーヤーを作成する方法について説明します。興味のある友人は、一緒に見てみることができます。皆さんのお役に立てれば幸いです。
ps: 音楽が再生できない場合があります。その理由は、オーディオ リンクは一時的なものであり、手動で置き換えることができるためです。
#TODO
css スタイルは次のとおりです
<template> <div class="song-item"> <audio src="" /> <!-- 进度条 --> <div class="audio-player"> <span>00:00</span> <div class="progress-wrapper"> <div class="progress-inner"> <div class="progress-dot" /> </div> </div> <span>00:00</span> <!-- 播放/暂停 --> <div style="margin-left: 10px; color: #409eff; cursor: pointer;" > 播放 </div> </div> </div></template><style lang="scss"> * { font-size: 14px; } .song-item { display: flex; flex-direction: column; justify-content: center; height: 100px; padding: 0 20px; transition: all ease .2s; border-bottom: 1px solid #ddd; /* 进度条样式 */ .audio-player { display: flex; height: 18px; margin-top: 10px; align-items: center; font-size: 12px; color: #666; .progress-wrapper { flex: 1; height: 4px; margin: 0 20px 0 20px; border-radius: 2px; background-color: #e9e9eb; cursor: pointer; .progress-inner { position: relative; width: 0%; height: 100%; border-radius: 2px; background-color: #409eff; .progress-dot { position: absolute; top: 50%; right: 0; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background-color: #409eff; transform: translateY(-50%); } } } } }</style>再生/一時停止を実現
アイデア: のクリックイベントを登録します"play" は、クリックイベント内で最後に属性とイベントをテンプレートに適用します。audio
Key API:の属性とメソッドを使用して、現在の曲の状態 (再生するか一時停止するか) を決定し、この状態を同期する属性を宣言して判断します。テンプレートでは、現在の曲が「再生/一時停止」と表示される必要があります。
audio.paused
: 現在のプレーヤーが一時停止中かどうか
audio.play()
:再生
audio.pause()
:一時停止
const audioIsPlaying = ref(false); // 用于同步当前的播放状态const audioEle = ref<HTMLAudioElement | null>(null); // audio 元素/** * @description 播放/暂停音乐 */const togglePlayer = () => { if (audioEle.value) { if (audioEle.value?.paused) { audioEle.value.play(); audioIsPlaying.value = true; } else { audioEle.value?.pause(); audioIsPlaying.value = false; } } };onMounted(() => { // 页面点击的时候肯定是加载完成了,这里获取一下没毛病 audioEle.value = document.querySelector('audio'); });
<div style="margin-left: 10px; color: #409eff; cursor: pointer;" @click="togglePlayer"> {{ audioIsPlaying ? '暂停' : '播放'}}</div>開始/終了時刻と開始時刻とスクロール バーを実現して、再生の動的な変化に動的に追従する
アイデア: 現在の再生時間と合計再生時間を取得し、現在の再生時間/合計再生時間と再生される曲の割合は、スクロール バーの割合です。プログレス バーをクリックして指定した再生位置にジャンプできるようにするaudio
Key API:要素の
timeupdateイベントをリッスンすることにより、現在時刻が変更されるたびに、DOM も同期的に更新されます。最終的な再生が完了すると、状態は初期化されます。
audio.currentTime
: 現在の再生時間、単位 (秒)
audio.duration
:オーディオの合計時間; 単位 (秒)
timeupdate
:
currentTimeこのイベントは、変更されるとトリガーされます。
import dayjs from 'dayjs';const audioCurrentPlayTime = ref('00:00'); // 当前播放时长const audioCurrentPlayCountTime = ref('00:00'); // 总时长const pgsInnerEle = ref<HTMLDivElement | null>(null);/** * @description 更新进度条与当前播放时间 */const updateProgress = () => { const currentProgress = audioEle.value!.currentTime / audioEle.value!.duration; pgsInnerEle.value!.style.width = `${currentProgress * 100}%`; // 设置进度时长 if (audioEle.value) audioCurrentPlayTime.value = dayjs(audioEle.value.currentTime * 1000).format('mm:ss'); };/** * @description 播放完成重置播放状态 */const audioPlayEnded = () => { audioCurrentPlayTime.value = '00:00'; pgsInnerEle.value!.style.width = '0%'; audioIsPlaying.value = false; };onMounted(() => { pgsInnerEle.value = document.querySelector('.progress-inner'); // 设置总时长 if (audioEle.value) audioCurrentPlayCountTime.value = dayjs(audioEle.value.duration * 1000).format('mm:ss'); // 侦听播放中事件 audioEle.value?.addEventListener('timeupdate', updateProgress, false); // 播放结束 event audioEle.value?.addEventListener('ended', audioPlayEnded, false); });
アイデア: スクロール バーのマウス クリック イベントを登録し、現在の ## を取得します。クリックされるたびに #offsetXアイデア:そして、スクロール バーの幅には width /
event.offsetXoffsetX
を使用します。 最後に、合計期間を使用します * 前の商により必要な進行状況が得られます。進行状況バーを更新するだけです。また。Key API:
: トリガーとなるイベント オブジェクトと比較したマウス ポインターの x 座標。
/** * @description 点击滚动条同步更新音乐进度 */const clickProgressSync = (event: MouseEvent) => { if (audioEle.value) { // 保证是正在播放或者已经播放的状态 if (!audioEle.value.paused || audioEle.value.currentTime !== 0) { const pgsWrapperWidth = pgsWrapperEle.value!.getBoundingClientRect().width; const rate = event.offsetX / pgsWrapperWidth; // 同步滚动条和播放进度 audioEle.value.currentTime = audioEle.value.duration * rate; updateProgress(); } } };onMounted({ pgsWrapperEle.value = document.querySelector('.progress-wrapper'); // 点击进度条 event pgsWrapperEle.value?.addEventListener('mousedown', clickProgressSync, false); });// 别忘记统一移除侦听onBeforeUnmount(() => { audioEle.value?.removeEventListener('timeupdate', updateProgress); audioEle.value?.removeEventListener('ended', audioPlayEnded); pgsWrapperEle.value?.removeEventListener('mousedown', clickProgressSync); });ドットをクリックしてスクロール バーをドラッグします。
hookを使用してこのドラッグ機能を管理し、このスクロール バーのマウス クリック、マウスの動き、およびマウス リフトのイベントを監視します。
xクリック時: ウィンドウ内のマウスの
座標、ウィンドウからのドットの距離
#xxleft
、右方向への最大移動距離 (スクロール バーの幅) を取得します。 -left
のウィンドウからのドット距離)。モバイルが無造作に計算を開始するのを防ぐために、最初にスイッチを設定できます。flag
移動時: ウィンドウ内のマウスの
座標を取得します。クリック時間を引いたリアルタイムで #xx
座標を取得します。そして最大移動距離で判断し、範囲を超えないようにしてください。最後に: 合計継続時間* (#xx
ドットとウィンドウのleft
の間の距離 / スクロール バーの長さから計算) スクロール バーと進行状況を更新するためのパーセンテージが取得されます。が解除されます:
フラグ
をリセットします。/** * @method useSongProgressDrag * @param audioEle * @param pgsWrapperEle * @param updateProgress 更新滚动条方法 * @param startSongDragDot 是否开启拖拽滚动 * @description 拖拽更新歌曲播放进度 */const useSongProgressDrag = ( audioEle: Ref<HTMLAudioElement | null>, pgsWrapperEle: Ref<HTMLDivElement | null>, updateProgress: () => void, startSongDragDot: Ref<boolean>) => { const audioPlayer = ref<HTMLDivElement | null>(null); const audioDotEle = ref<HTMLDivElement | null>(null); const dragFlag = ref(false); const position = ref({ startOffsetLeft: 0, startX: 0, maxLeft: 0, maxRight: 0, }); /** * @description 鼠标点击 audioPlayer */ const mousedownProgressHandle = (event: MouseEvent) => { if (audioEle.value) { if (!audioEle.value.paused || audioEle.value.currentTime !== 0) { dragFlag.value = true; position.value.startOffsetLeft = audioDotEle.value!.offsetLeft; position.value.startX = event.clientX; position.value.maxLeft = position.value.startOffsetLeft; position.value.maxRight = pgsWrapperEle.value!.offsetWidth - position.value.startOffsetLeft; } } event.preventDefault(); event.stopPropagation(); }; /** * @description 鼠标移动 audioPlayer */ const mousemoveProgressHandle = (event: MouseEvent) => { if (dragFlag.value) { const clientX = event.clientX; let x = clientX - position.value.startX; if (x > position.value.maxRight) x = position.value.maxRight; if (x < -position.value.maxLeft) x = -position.value.maxLeft; const pgsWidth = pgsWrapperEle.value?.getBoundingClientRect().width; const reat = (position.value.startOffsetLeft + x) / pgsWidth!; audioEle.value!.currentTime = audioEle.value!.duration * reat; updateProgress(); } }; /** * @description 鼠标取消点击 */ const mouseupProgressHandle = () => dragFlag.value = false; onMounted(() => { if (startSongDragDot.value) { audioPlayer.value = document.querySelector('.audio-player'); audioDotEle.value = document.querySelector('.progress-dot'); // 在捕获中去触发点击 dot 事件. fix: 点击原点 offset 回到原点 bug audioDotEle.value?.addEventListener('mousedown', mousedownProgressHandle, true); audioPlayer.value?.addEventListener('mousemove', mousemoveProgressHandle, false); document.addEventListener('mouseup', mouseupProgressHandle, false); } }); onBeforeUnmount(() => { if (startSongDragDot.value) { audioPlayer.value?.removeEventListener('mousedown', mousedownProgressHandle); audioPlayer.value?.removeEventListener('mousemove', mousemoveProgressHandle); document.removeEventListener('mouseup', mouseupProgressHandle); } }); };最後にこれを呼び出します
hook
// 是否显示可拖拽 dot// 可以在原点元素上增加 v-if 用来判定是否需要拖动功能const startSongDragDot = ref(true);useSongProgressDrag(audioEle, pgsWrapperEle, updateProgress, startSongDragDot);
[関連する推奨事項: vue.js ビデオ チュートリアル
]
以上がVue3 を使用してプレーヤーを作成する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。