検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Vue3 を使用してプレーヤーを作成する方法を段階的に説明します。

Vue3 を使用してプレーヤーを作成する方法を段階的に説明します。

藏色散人
藏色散人転載
2023-03-03 15:53:432283ブラウズ

この記事は、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 要素の timeupdate イベントをリッスンすることにより、現在時刻が変更されるたびに、DOM も同期的に更新されます。最終的な再生が完了すると、状態は初期化されます。

Key API:

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 / offsetX を使用します。 最後に、合計期間を使用します * 前の商により必要な進行状況が得られます。進行状況バーを更新するだけです。また。 Key API:

event.offsetX

: トリガーとなるイベント オブジェクトと比較したマウス ポインターの 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

座標、ウィンドウからのドットの距離 left、右方向への最大移動距離 (スクロール バーの幅) を取得します。 - leftのウィンドウからのドット距離)。モバイルが無造作に計算を開始するのを防ぐために、最初にスイッチを設定できます。 flag移動時: ウィンドウ内のマウスの

#xx

座標を取得します。クリック時間を引いたリアルタイムで #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 サイトの他の関連記事を参照してください。

声明：
この記事はjuejin.imで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：vue3 の ref と reactive の包括的なインベントリ次の記事：vue3 の ref と reactive の包括的なインベントリ

関連記事

続きを見る