自定义 audio 样式以及各种事件

图可能是这个样子， 记不清了

 

由于 audio 标签被说实在有点丑， 只能自己开始自定义， 找了很多资料， 自己后期加工，下面开始贴代码;

一. HTML代码片段（基于Angular9，css 文件里面没有见过的class都是自定义部分， 顾名思义即可）

<div class="audio-wrapper flex-start-center white margin-B10">
    <audio class="margin-T15 audio-box" id="audio" src="{{音频文件路径}}"></audio> <!-- controls -->

    <div class="audio-left font20 flex-center-center margin-R10 cursor" id="audioPlayer" (click)="play()">
        <span *ngIf="player === 'play'" class="color-topic"><i nz-icon nzType="pause-circle" nzTheme="outline"></i></span> <!-- 播放 -->
        <span *ngIf="player === 'pause'"><i nz-icon nzType="play-circle" nzTheme="outline"></i></span> <!-- 停止 -->
    </div>
    <!-- 开始时间  -->
    <div class="audio-time margin-R15"><span class="audio-length-current" id="audioCurTime">00:00</span></div>

    <!--  进度条  -->
    <div class="progress-bar-bg {{宽度200px}} relative" id="progressBarBg">
        <div class="">
            <span [ngClass]="currentTime != 0 ? '' : 'hide'" id="progressDot"></span>
            <div class="progress-bar" id="progressBar"></div>
        </div> 
    </div>

    <!-- 结束时间  -->
    <div class="audio-time {{左边距15px}}"><span class="audio-length-total" id="audioTotalTime">00:00</span></div>

    <!--  音量  -->
    <div class="audio-volume margin-L10 cursor relative" (mouseover)="mouseVolume('mouseover')">
        <span *ngIf="volumer === 'nomute'" (click)="volume($event)"><fa-icon [icon]="['fas', 'volume-up']"></fa-icon></span>
        <span *ngIf="volumer === 'mute'" (click)="volume($event)"><fa-icon [icon]="['fas', 'volume-mute']"></fa-icon></span>

        <div class="audio-volume-slider white absolute flex-justify-center" id="volumeSlider">
            <div class="relative height100 flex-direction-column-reverse" id="volumeSliderStrip">
                <span id="volumeDot white" class="absolute" id="volumeDot"></span>
                <div class="volume-bar" id="volumeBar"></div>
            </div>
        </div>

    </div>

    <!--  更多（下载）  -->
    <div class="audio-volume margin-L10 cursor" (click)="down()">
        <span><i nz-icon nzType="more" nzTheme="outline"></i></span>
    </div>
</div>

二， css 代码片段

audio{outline: none;} // 去掉默认标签外面的黑边框
.audio-wrapper{
    width: 347px;
    height: 48px;
    padding: 0 31px;

    .audio-left{
        width: 24px;
        height: 24px;
    }

    .audio-time{
        width: 37px;
        height: 14px;
    }

    .progress-bar-bg {
        width: 142px;
        height: 20px;
        cursor: pointer;
        padding: 9px 0;

        &>div{
            background-color: #D9DADC;
        }

        & span {
            content: " ";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            background-color: #fff;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -5px;
            margin-left: -5px;
            cursor: pointer;
            border: 2px solid red;
        }

        .progress-bar {
            background-color: red;
            width: 0;
            height: 2px;
        }
    }

    @mixin width-minXin {
        width: 16px;
        height: 16px;
    }

    /* 音量 */
    .audio-volume{
        @include width-minXin;

        .audio-volume-slider-show{
            animation: move-the-object 0.3s;
        }

        .audio-volume-slider{
            width: 30px;
            height: 100px;
            cursor: pointer;
            padding: 12px 0 5px 0;
            bottom: 31px;
            right: -2px;
            box-shadow: 0 2px 12px 0;
            display: none;

            &>div{
                background-color: rgba(0,0,0,0.04);
                width: 4px;

                &::after{
                    content: " ";
                    border-left: 6px solid transparent;
                    border-right: 7px solid transparent;
                    border-top: 8px solid #FFFFFF;
                    top: 87px;
                    position: absolute;
                    left: -4px;
                }
            }

            & span {
                content: " ";
                width: 10px;
                height: 10px;
                border-radius: 50%;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                background-color: #fff;
                position: absolute;
                left: -3px;
                top: 5%;
                margin-top: -5px;
                cursor: pointer;
                border: 3px solid red;
            }

            .volume-bar {
                background-color: red;
                width: 4px;
                height: 100%;
            }

        }

    }

    .audio-volume{
        @include width-minXin;
    }
}

三， 主要功能部分

   1. 在页面渲染完成的方法中获取audio元素， 便于以后使用

        this.audio = document.getElementById('audio');

         // 监听进度条
        fromEvent(this.audio, 'timeupdate').subscribe( () => {
            this.updateProgress(this.audio);
        });

        // 监听播放完成事件
        fromEvent(this.audio, 'ended').subscribe( () => {
            this.audioEnded();
        });

        /* 音频进度条 */
        // 点击进度条跳到指定点播放
        // 注意：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时e.offsetX的值非常小，会导致进度条弹回开始处（简直不能忍！！）
        let progressBarBg = document.getElementById('progressBarBg');
        let progressDot = document.getElementById('progressDot');
        fromEvent(progressBarBg, 'mousedown').subscribe( (event) => {
            this.progressBarBgMousedown = true;
            let pgsWidth = parseFloat(window.getComputedStyle(progressBarBg, null).width.replace('px', ''));
            let rate = event['offsetX'] / pgsWidth;
            this.audio.currentTime = this.audio.duration * rate;
            this.updateProgress(this.audio);
        });

        // 拖动进度条
        this.dragProgressDotEvent(this.audio, progressDot, progressBarBg);

        /* 音量调节器进度条 */
        // 移入页面其他区域， 关闭音量调节器
        let volumeSlider = document.getElementById('volumeSlider');
        fromEvent(window, 'mouseout').subscribe( (e) => {
            let volumeSliderStrip = document.getElementById('volumeSliderStrip');
            if (!volumeSliderStrip) { // 不存在当前节点则不处理
                return false;
            }
            let childNode = volumeSliderStrip.childNodes;

            if (this.mouseoverAfter && volumeSlider !== e.target && volumeSliderStrip !== e.target && childNode[0] != e.target && childNode[1] != e.target) {
                volumeSlider.style.display = 'none';
            }
            return false;
        });

        // 调节音量
       
        let volumeDot = document.getElementById('volumeDot');
        fromEvent(volumeSlider, 'mousedown').subscribe( (event) => {
            let vsHeight = parseFloat(window.getComputedStyle(volumeSlider, null).height.replace('px', ''));
            // 计算所占百分比， 偏移量 - 内边距 = 当前音量柱所占偏移量
            let rate: number;
            const volumeSliderStrip = document.getElementById('volumeSliderStrip');
            const volumeBar = document.getElementById('volumeBar');
            const vssHeight = vsHeight - 12 - 5; // 整条进度条高度
            const offsetY = event['offsetY'];

            if (event.target === volumeSliderStrip) { // 鼠标触发有颜色进度条，(偏移量 + 当前进度条剩余部分高度) / 整条进度条高度
                rate = offsetY / vssHeight;
            } else if (event.target === volumeBar) { // 鼠标触发剩余进度条，偏移量 / 整条进度条高度
                const vbHeight = parseFloat(window.getComputedStyle(volumeBar, null).height.replace('px', ''));
                rate = (offsetY + (vssHeight - vbHeight)) / vssHeight;
            } else {
                rate = (offsetY - 12) / vssHeight;
            }

            // 超出区域的事件触发不做处理
            if (rate > 0 && rate < 1) {
                this.updateVolumeProgress(1-rate);
            }
        });

        fromEvent(volumeSlider, 'mouseout').subscribe((e) => {
            volumeSlider.style.display = 'none';
        })



        // 拖动音量进度条
        this.dragVolumeDotEvent(volumeDot, volumeSlider);

        // 显示总时长
        this.appService.setTime(1, 500).subscribe( ret => {
            this.currentTime = this.audio.currentTime;
            document.getElementById('audioTotalTime').innerText = this.transTime(this.audio.duration);
            this.cdr.detectChanges();
        });

2. 调节音量相关方法

    /**
     * 更新音量进度条
     * @param rate 当前音量大小
     */
    updateVolumeProgress(rate) {
        document.getElementById('volumeBar').style.height = rate * 100 + '%';
        document.getElementById('volumeDot').style.top = (1-rate) * 100 + '%';
        this.audio.volume = rate;
    }

    /**
     * 拖动调节音量
     * @param {*} dot
     * @param {*} barBg
     */
    dragVolumeDotEvent(dot, barBg) {
        let position = {
            oriOffestTop: 0, // 移动开始时进度条的点距离进度条的偏移值 oriOffestTop
            oriY: 0, // 移动开始时的Y坐标 oriY
        };

        let flag = false; // 标记是否拖动开始

        let down = (event) => {
            flag = true;
            position.oriOffestTop = dot.offsetTop;
            position.oriY = event.touches ? event.touches[0].clientY : event.clientY; // 要同时适配mousedown和touchstart事件

            // 禁止默认事件（避免鼠标拖拽进度点的时候选中文字）
            if (event && event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }

            // 禁止事件冒泡
            if (event && event.stopPropagation) {
                event.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        }

        let move = (event) => {
            if (flag) {
                let clientY = event.touches ? event.touches[0].clientY : event.clientY; // 要同时适配mousemove和touchmove事件
                let length = clientY - position.oriY;

                let vsHeight = parseFloat(window.getComputedStyle(barBg, null).height.replace('px', ''));
                const vssHeight = vsHeight - 12 - 5; // 整条进度条高度
                let rate = (position.oriOffestTop + length) / vssHeight;
                // 超出区域的事件触发不做处理
                if (rate > 0 && rate < 1) {
                    this.updateVolumeProgress(1-rate);
                }
            }
        }

        let end = () => {
            flag = false;
        }

        // 鼠标按下时
        fromEvent(dot, 'mousedown').subscribe(down);
        fromEvent(dot, 'touchstart').subscribe(down);

        // 开始拖动
        fromEvent(document, 'mousemove').subscribe(move);
        fromEvent(document, 'touchmove').subscribe(move);

        // 拖动结束
        fromEvent(document, 'mouseup').subscribe(end);
        fromEvent(document, 'touchend').subscribe(end);
    }

    /**
     * 音量打开关闭
     */
    volume(event) { // nomute / 静音 mute
        if (this.volumer === 'nomute') { // 静音
            this.audio.muted = true;
        } else { // 打开声音
            this.audio.muted = false;
        }
        this.volumer = this.volumer === 'nomute' ? 'mute' : 'nomute';
        event.stopPropagation();
    }

    /**
     * 鼠标移入显示音量调节器
     */
    mouseVolume(type) {
        if (type === 'mouseover') { // 鼠标移入
            this.mouseoverAfter = false;
            document.getElementById('volumeSlider').style.display = 'flex';
            // 四秒如果还没有移到目标dom， 则关闭音量调节框
            this.appService.setTime(1, 4000).subscribe( ret => {
                this.mouseoverAfter = true;
            });
        }
    }

3. 播放器相关方法

    /**
     * 播放
     */
    play() {
        if (this.player === 'pause') { // 播放
            this.audio.play();
        } else {
            this.audio.pause(); // 停止
        }
        this.player = this.player === 'pause' ? 'play' : 'pause';
    }

    /**
     * 鼠标拖动进度点时可以调节进度
     * @param {*} audio
     * @param {*} dot
     * @param {*} barBg
     */
    dragProgressDotEvent(audio, dot, barBg) {
        let position = {
            oriOffestLeft: 0, // 移动开始时进度条的点距离进度条的偏移值
            oriX: 0, // 移动开始时的x坐标
            maxLeft: 0, // 向左最大可拖动距离
            maxRight: 0 // 向右最大可拖动距离
        };
        let flag = false; // 标记是否拖动开始

        let down = (event) => {
            if (!audio.paused || audio.currentTime != 0) { // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
                flag = true;

                position.oriOffestLeft = dot.offsetLeft;
                position.oriX = event.touches ? event.touches[0].clientX : event.clientX; // 要同时适配mousedown和touchstart事件
                position.maxLeft = position.oriOffestLeft; // 向左最大可拖动距离
                position.maxRight = barBg.offsetWidth - position.oriOffestLeft; // 向右最大可拖动距离

                // 禁止默认事件（避免鼠标拖拽进度点的时候选中文字）
                if (event && event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }

                // 禁止事件冒泡
                if (event && event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    window.event.cancelBubble = true;
                }
            }
        }

        let move = (event) => {
            if (flag) {
                var clientX = event.touches ? event.touches[0].clientX : event.clientX; // 要同时适配mousemove和touchmove事件
                var length = clientX - position.oriX;
                if (length > position.maxRight) {
                    length = position.maxRight;
                } else if (length < -position.maxLeft) {
                    length = -position.maxLeft;
                }
                let pgsWidth = parseFloat(window.getComputedStyle(barBg, null).width.replace('px', ''));
                let rate = (position.oriOffestLeft + length) / pgsWidth;
                audio.currentTime = audio.duration * rate;
                this.updateProgress(audio);
            }
        }

        let end = () => {
            flag = false;
        }

        // 鼠标按下时
        fromEvent(dot, 'mousedown').subscribe(down);
        fromEvent(dot, 'touchstart').subscribe(down);

        // 开始拖动
        fromEvent(document, 'mousemove').subscribe(move);
        fromEvent(document, 'touchmove').subscribe(move);

        // 拖动结束
        fromEvent(document, 'mouseup').subscribe(end);
        fromEvent(document, 'touchend').subscribe(end);
    }

    /**
     * 更新进度条与当前播放时间
     * @param {object} audio - audio对象
     */
    updateProgress(audio) {
        this.currentTime = audio.currentTime; // 赋值当前时间
        let value = audio.currentTime / audio.duration;
        document.getElementById('progressBar').style.width = value * 100 + '%';
        document.getElementById('progressDot').style.left = value * 100 + '%';
        document.getElementById('audioCurTime').innerText = this.transTime(audio.currentTime);
        this.cdr.detectChanges();
    }

    /**
     * 播放完成时把进度调回开始的位置
     */
    audioEnded() {
        this.player = 'pause'; // 播放完成之后回到初始状态
        document.getElementById('progressBar').style.width = 0 + 'px';
        document.getElementById('progressDot').style.left = 0 + 'px';
        document.getElementById('audioCurTime').innerText = this.transTime(0);
        this.currentTime = 0; // 赋值当前时间
        this.cdr.detectChanges();
    }

    /**
     * 音频播放时间换算
     * @param value - 音频当前播放时间，单位秒
     */
    transTime(value) {
        let time = "";
        let h = parseInt((value / 3600).toString());
        value %= 3600;
        let m = parseInt((value / 60).toString());
        let s = parseInt((value % 60).toString());
        if (h > 0) {
            time = this.formatTime(h + ":" + m + ":" + s);
        } else {
            time = this.formatTime(m + ":" + s);
        }

        return time;
    }

    /**
     * 格式化时间显示，补零对齐
     * eg：2:4  -->  02:04
     * @param {string} value - 形如 h:m:s 的字符串 
     */
    formatTime(value) {
        let time = "";
        let s = value.split(':');
        let i = 0;
        for (; i < s.length - 1; i++) {
            time += s[i].length == 1 ? ("0" + s[i]) : s[i];
            time += ":";
        }
        time += s[i].length == 1 ? ("0" + s[i]) : s[i];

        return time;
    }