プレーヤー機能を実現するためのvue + element uiのサンプルコード

<div class="right di main-wrap" v-loading="audio.waiting">
   <!-- ここでの ref 属性は、this.$refs.audio を通じて Vue コンポーネント内の DOM 要素を簡単に取得するために使用できます -->
   <audio ref="audio" class="dn"
   :src="url" :preload="audio.preload"
   @play="再生中"
   @error="エラー時"
   @waiting="待機中"
   @pause="一時停止中"
   @timeupdate="onTimeupdate"
   @loadedmetadata="読み込み済みのメタデータ"
   </オーディオ>

   <div class="w-full">
     <div class="flex items-center w-10/12 mx-auto">
       <!-- 現在の時刻 -->
       <el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>

       <!-- スクロールバー -->
       <el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" class="slider_time"></el-slider>
       <!-- 合計所要時間 -->
       <el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
     </div>
     <div class="mt-3 flex items-center w-1/2 mx-auto justify-around">
       <!-- 再生/一時停止 -->
       <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>
       <!-- 早送り -->
       <el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{audio.speed | transSpeed}}</el-button>
       <!-- ミュート -->
       <el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{audio.muted | transMutedOrNot}}</el-button>
       <!-- ボリューム -->
       <div class="flex items-center">
         <span class="mr-2 text-sm">ボリューム</span>
         <el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" @change="changeVolume" class="slider_voice"></el-slider>
       </div>

       <!-- ダウンロード -->
       <a :href="url" rel="external nofollow" v-show="!controlList.noDownload" target="_blank" class="download text-sm" download>ダウンロード</a>
     </div>
   </div>
 </div>

<スクリプト>
  // 整数を時間:分:秒の形式に変換する function realFormatSecond(second) {
    var secondType = 秒の型

    if (secondType === '数値' || secondType === '文字列') {
      秒 = parseInt(秒)

      var hours = Math.floor(秒 / 3600)
      秒 = 秒 - 時間 * 3600
      var mimute = Math.floor(秒 / 60)
      秒 = 秒 - 分 * 60

      時間を返す + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
    } それ以外 {
      '0:00:00' を返す
    }
  }

  エクスポートデフォルト{
    名前: 'voicetotext',
    小道具: {
      速度:
        タイプ: 配列、
        デフォルト （） {
          [1, 1.5, 2]を返す
        }
      },
      コントロールリスト: {
        タイプ: 文字列、
        デフォルト： ''
      }
    },
    データ（）{
      戻る {
        URL: 'https://wdd.js.org/element-audio/static/falling-star.mp3',
        オーディオ：
          現在の時刻: 0,
          最大時間: 0,
          再生中: false、
          ミュート: false、
          速度: 1,
          待機中: true、
          プリロード: 'auto'
        },

        スライダー時間: 0,
        ボリューム: 100、
        速度: this.theSpeeds、

        コントロールリスト: {
          // ダウンロードを表示しない noDownload: false,
          // ミュートを表示しない noMuted: false,
          // ボリュームバーを表示しない noVolume: false,
          // 進捗バーを表示しない noProcess: false,
          // 1つだけ再生できます onlyOnePlaying: false,
          // 早送りしないボタン noSpeed: false
        }
      }
    },
    方法:{
      コントロールリストを設定する（）{
        controlList を this.theControlList.split(' ') とします。
        コントロールリスト.forEach((アイテム) => {
          if(this.controlList[item] !== 未定義){
            this.controlList[item] = true
          }
        })
      },
      速度を変更する() {
        インデックス = this.speeds.indexOf(this.audio.speed) + 1 とします。
        this.audio.speed = this.speeds[インデックス % this.speeds.length]
        this.$refs.audio.playbackRate = this.audio.speed
      },
      ミュートまたはミュートしない() {
        this.$refs.audio.muted = !this.$refs.audio.muted
        this.audio.muted = this.$refs.audio.muted
      },
      // ボリュームバーのツールチップ
      formatVolumeToolTip(インデックス) {
        'ボリュームバー: ' + インデックスを返す
      },
      //進捗バーのツールチップ
      フォーマットプロセスツールチップ(インデックス = 0) {
        インデックス = parseInt(this.audio.maxTime / 100 * インデックス)
        '進捗バー: ' + realFormatSecond(index) を返します
      },
      // ボリューム変更changeVolume(index = 0) {
        this.$refs.audio.volume = インデックス / 100
        this.volume = インデックス
      },
      // 再生ジャンプ changeCurrentTime(index) {
        this.pausePlay()
        this.$refs.audio.currentTime = parseInt(インデックス / 100 * this.audio.maxTime)
      },
      再生または一時停止() {
        this.audio.playing を返しますか? this.pausePlay() : this.startPlay()
      },
      // 再生を開始する startPlay() {
        this.$refs.audio.play()
      },
      // 一時停止 pausePlay() {
        this.$refs.audio.pause()
      },
      // オーディオが一時停止されたとき onPause () {
        this.audio.playing = false
      },
      // エラーが発生すると、読み込み状態が表示されます onError() {
        this.audio.waiting = true
      },
      // オーディオが待機を開始すると onWaiting (res) {
        コンソール.log(res)
      },
      // オーディオの再生が始まると onPlay (res) {
        コンソール.log(res)
        this.audio.playing = true
        this.audio.loading = false

        if(!this.controlList.onlyOnePlaying){
          戻る
        }

        ターゲットをres.targetとします

        audios = document.getElementsByTagName('audio'); となります。

        [...オーディオ].forEach((アイテム) => {
          if(アイテム !== ターゲット){
            アイテム.一時停止()
          }
        })
      },
      // timeupdate イベントは、オーディオ ストリームの現在の再生時間を更新するために 1 秒あたり約 1 回呼び出されます。onTimeupdate(res) {
        // コンソール.log('timeupdate')
        // コンソール.log(res)
        this.audio.currentTime = res.target.currentTime
        this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
      },
      //音声ストリームメタデータがロードされると、このイベントのコールバック関数がトリガーされます //音声メタデータには主に音声の長さなどのデータが含まれます onLoadedmetadata(res) {
        this.audio.waiting = false
        this.audio.maxTime = parseInt(res.target.duration)
      }
    },
    フィルター:
      フォーマット秒(秒 = 0) {
        realFormatSecond(秒)を返す
      },
      transPlayPause(値) {
        戻り値 ? '一時停止' : '再生'
      },
      transMutedOrNot(値) {
        戻り値 ? '再生' : 'ミュート'
      },
      トランススピード(値) {
        '早送り: x' + 値を返す
      }
    },
    作成された() {
      this.setControlList()
    }
  }
</スクリプト>

<スタイル スコープ lang="scss">
  。右{
     幅: 100%;
     パディング: 10px 15px;
     表示: インラインブロック;
     .スライダー{
       表示: インラインブロック;
       位置: 相対的;
       上: 14px;
       左マージン: 15px;
     }
     .slider_time{
       幅: 550ピクセル;
       マージン: 0 10px;
     }
     .slider_voice{
       幅: 80ピクセル;
     }
     .ダウンロード{
       色: #409EFF;
       左マージン: 15px;
     }

     .dn{
       表示: なし;
     }
   }

</スタイル>