自定义音频播放组件audioPlay

本文介绍了如何实现一个自定义的音频播放组件audioPlay,功能包括播放/暂停、音量控制、播放速度调整、播放进度条以及下载。该组件基于html5的<audio>标签,利用vue进行逻辑处理。详细代码包括html、css和js部分。

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

一、播放器的主要功能

1、播放/暂停

2、音量控制

3、播放速度控制

4、播放进度条

5、下载

播放器如下:

二、代码实现

自定义播放器是基于html5的一个<audio>标签完成的,逻辑处理使用vue完成的。

html代码:

<Row class="audio-player" type="flex" align="middle" justify="start" :disabled="!audioFile">
    <!-- 速度控制 -->
    <Icon
      class="control-icon"
      type="ios-rewind"
      size="20"
      color="#5e72e4"
      @click="changeSpeedSlow"
    />
    <Icon
      v-show="showPlay"
      class="control-icon"
      type="ios-pause"
      size="20"
      color="#5e72e4"
      @click="handlePlay"
    />
    <Icon
      v-show="!showPlay"
      class="control-icon"
      type="ios-play"
      size="20"
      color="#5e72e4"
      @click="handlePlay"
    />
    <Icon
      class="control-icon"
      type="ios-fastforward"
      size="20"
      color="#5e72e4"
      @click="changeSpeedFast"
    />
    <span class="speed-span">X{
  
  { multipleArray[multipleIndex] }}</span>
    <audio
      id="audioPlayer"
      ref="audio"
      preload="metadata"
      :src="audioFile"
      controlslist="nodownload"
      @loadedmetadata="onLoadedmetadata"
      @timeupdate="onTimeupdate"
      @volumechange="onVolumechange"
      @ended="onAudioEnded"
    >
      {
  
  { $t("unsupportedTip") }}
    </audio>
    <!-- 播放进度条 -->
    <Row
      class="audio-controls"
      type="flex"
      align="middle"
      justify="space-between"
    >
      <span id="currentTime">{
  
  { currentTime }}</span>
      <input 
        class="progress-bar" 
        ref="progressbar" 
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值