vue + element ui实现播放器功能

最新推荐文章于 2022-10-18 17:51:59 发布

大海patterson

最新推荐文章于 2022-10-18 17:51:59 发布

阅读量2.2k

点赞数 2

分类专栏： vue播放器文章标签： vue elementui vue.js html5 javascript

本文链接：https://blog.youkuaiyun.com/douguaiwo521521/article/details/115690126

版权

本文展示了如何使用Vue和ElementUI创建一个功能齐全的音频播放器，包括播放/暂停、快进、静音、音量调节和下载功能。通过HTML和JS代码详细解释了每个功能的实现，并提供了SCSS样式的辅助。此外，还提供了一首测试音乐的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没有效果图的展示都是空口无凭
在这里插入图片描述
1.基于audio并结合elementUI 的进度条实现
2.实现了播放器基本的功能，播放/暂停、快进、静音、调节声音大小、下载等功能

html代码，关键部分已加注释

<div class="right di main-wrap" v-loading="audio.waiting">
   <!-- 此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 -->
   <audio ref="audio" class="dn"
   :src="url" :preload="audio.preload"
   @play="onPlay"
   @error="onError"
   @waiting="onWaiting"
   @pause="onPause"
   @timeupdate="onTimeupdate"
   @loadedmetadata="onLoadedmetadata"
   ></audio>

   <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.

最低0.47元/天解锁文章