vue自写的audio播放组件

最新推荐文章于 2024-08-26 18:44:07 发布

qq_807175022

最新推荐文章于 2024-08-26 18:44:07 发布

阅读量4.4k

点赞数

分类专栏： vue audio js

本文链接：https://blog.csdn.net/qq_807175022/article/details/94548485

版权

本文介绍如何在 Vue 中创建一个自定义的 audio 播放组件，涵盖组件设计、事件监听、控制功能实现等关键步骤，帮助开发者实现更灵活的音频播放控制。

摘要由CSDN通过智能技术生成

<template>
  <div class="audioProgress">

    <div class="audio-controls">
      ![上一课]()
      <div v-if="!isPlay">
        ![播放]()
      </div>
       <div v-else-if="isPlay&&loading" class="loading-bg">
          <div class="loading-bar"></div>
       </div>
      <div v-else>
        ![暂停]()
      </div>
      ![下一课]()
    </div>
    <div class="progress-box">
      <div class="progressbar" @click="playMusic" ref="runfatbar">
        <div class="bluebar" ref="runbar" :style="{width:indicatorPosition}">
          <span
            class="tag"
            ref="tag"
            @mousedown.prevent="barDown"
            @touchstart.prevent="barDown">
            <i class="tag_inner"></i>
          </span>
        </div>
      </div>
      <div class="audio-time-box">
        <span class="curTime">{
  { currentTime }}</span>
        <span class="durTime">{
  { durationTime }}</span>
      </div>
    </div>

    <!-- 播放器资源 -->
    <audio
      @ended="handleAudioPlayEnded"
      @timeupdate="handleAudioTimeUpdated"
      @canplaythrough="hideLoading"
      preload
      @error="loadError"
      ref="audio">
      <source :src="audioSrc" type="audio/mp3"/>
    </audio>
  </div>

</template>

<script>

  export default {
    name: 'audio-paly',
    props: {
      audioSrc: {
        type