Vue自定义封装音频播放组件(带拖拽进度条)(改版)

参考别人写的组件进行的改版
原文组件链接:https://blog.youkuaiyun.com/weixin_48215380/article/details/138598853
改版之后的样式
在这里插入图片描述

<template>
  <div class="audioModule">
    <div class="left">
      <p class="audio_Name">{
   
   {
   
    audioName }}</p>
      <div class="audio_wrap_content">
        <audio ref="audio" @play="playFunc" @pause="pauseFunc" @timeupdate="timeupdateFunc"
          @loadedmetadata="onLoadedmetadata" @ended="handleEnd">
          <source :src="audioSrc" />
        </audio>
        <div class="cudio_control_content">

          <!-- <img @click="startPlayOrPause" class="state_img" :src="audio.playing ? stopImg : playImg" alt="" /> -->
          <div class="state_time" style="marginRight:15px">{
   
   {
   
    audio.currentTime | formatSecond }}</div>
          <div class="slider">
            <el-slider v-model="sliderTime" :show-tooltip="false" @change="onChange"></el-slider>
          </div>
          <div class="state_time" style="marginLeft:10px">{
   
   {
   
    audio.maxTime | formatSecond }}</div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="audio_btn active_audio_hover">
        <i class="iconfont" style="transform: rotate(180deg);"  @click="advance(2)">&#xe74e;</i>
      </div>
      <div class="audio_btn" @click="startPlayOrPause" :class="{active_audio_btn:audio.playing}">
        <i class="iconfont" v-if="!audio.playing">&#xe751;</i>
        <i class="iconfont" v-else>&#xe750;
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值