audio标签实现简单的自定义播放器

实现思路

  1. 原生的audio标签,controls属性用于控制是否显示一个默认的播放器,这个播放器的样式是浏览器决定的,如果使用默认播放器,在不同的浏览器中呈现的样式会不一样。要实现自定义播放器样式,就不要去设置control(因为controls默认值为false)。

  2. 通过监听原生audio标签的事件,以及调用原生audio标签的方法,来实现对音频的控制。自定义播放器只是一个躯壳,本质的操作全在audio标签上。

  3. 因为该vue项目使用了vant,中间的滑条就直接使用了vant的slider组件。当然,也可以使用vue-slider-component组件,或者自己手写一个小轮子。

  4. 用动作去更新状态。而不是先更新状态,再监听状态变更去执行动作。因为动作执行不一定会成功,如果状态跟执行结果不一样就很尴尬了。

效果预览

(看起来非常简单,或者说简陋,因为平时对audio并没有什么接触,此文仅作笔记之用。)

audio的常用的属性

  • controls 。如果声明了该属性,浏览器将提供一个包含声音,播放进度,播放暂停的控制面板,样式由浏览器决定。
  • currentTime。当前音频已播放时长。
  • duration。当前音频总时长。
  • preload。预加载,这是一个枚举属性,none表示不做预加载,metadata表示会对元数据(比如音频时长)做预加载,auto表示会尝试对元数据以及音频柳做完全预加载。
  • src。音频文件的地址。
  • playbackRate。播放速度。网上常见的1x,1.5x,0.5x播放速度就是利用该属性实现的。

audio的常用的事件

  • loadedmetadata。表示音频元数据已经被加载,我们一般在这里通过event.target.duration获取音频总时长。
  • canplay。这个事件会在loadedmetadata之后触发,表示音频可以被播放了。
  • canplaythrough。这个事件会在canplay之后触发,表示浏览器认为不出意外的话音频可以被播到最后。
  • play。表示音频已开始播放。
  • pause。表示音频已暂停播放。
  • ended。表示播放完了最后一帧。
  • error。表示播放出错,可能是音频文件地址无效,或者音频格式不支持。
  • timeupdate。表示正在播放中,播放过程中会被频繁触发,一般在这里通过event.target.currentTime来实时获取已播放时长。

audio的常用的方法

  • play。播放音频。此方法会返回一个Promise对象。不需要音频数据已经加载到能够播放的状态。如果录音文件地址可用,会走到fulfilled状态;如果录音文件地址不可用或者缺失,会走到rejected状态;
  • pause。暂停音频。返回值和行为均与play一样。

常用场景实现

1,显示音频时长如何实现

答:监听loadedmetadata,通过event.target.duration取出音频总时长,因为音频总时长单位为秒,所以一般情况下都会有一个秒转换为时分秒格式的需求,而且一般情况下还要补0,实现如下:

const filterDuration = (s=0) => {
        if (typeof s !== 'number') {
            throw new Error('传入时长需为数字类型')
        };
        
        let hour = Math.floor(s / 3600);
        let min = Math.floor((s % 3600) / 60);
        let sec = Math.floor(s % 60);

        hour = hour < 10 ? `0${hour}` : hour;
        min = min < 10 ? `0${min}` : min;
        sec = sec < 10 ? `0${sec}` : sec;

        return `${hour}:${min}:${sec}`;
    }

2,如何动态获取当前播放百分比?

答:监听timeupdate事件,通过event.target.currentTime / event.target.duration来计算百分比。这里我遇到了一个比较奇特的问题:当音频时长很短时(比如只有几秒钟),有时候event.target.currentTime会大于音频总时长。所以我针对播放进度百分比大于100%的情况做了处理,目前不是太明白该现象原因所在。

写在最后

这只是对audio标签的一个入门使用,实际上我对audio了解得并不多,特此记录一些基础操作,方便后续自己翻阅。

posted @ 2020-06-30 17:32  陌上兮月  阅读(2597)  评论(0编辑  收藏  举报