一、播放器的主要功能
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>
<