HTML中给audio自定义样式

HTML5自带啊audio能满足基本的需求了，但是当设计提出一些效果的要求的时候，修改起来发现很麻烦.

比如下 图1 是HTML5 audio默认效果，下图2是设计要求的效果：

图1 图2

is-it-possible-to-style-html5-audio-tag 提到了一种简单通过伪类修改audio内某些元素的方法，缺点是能修改部分有限：

audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button

更多的做法是，通过自己写DOM，监听DOM上的事件，通过JS来调用真实的audio的各种方法，获取audio提供的各种属性。

选择了 https://www.mediaelementjs.com/ 在项目中应用

$ npm i -D  mediaelementjs

在代码中引入一次

// main.js
import 'mediaelement/full';
import 'mediaelement/build/mediaelementplayer.min.css';

抽象定义了一个 tsp-audio，并可以根据状态来添加不同的class

// tsp-audio.vue


<template>
    <span class="tsp-audio" :class="{'playing': status==1}">
        <audio width="260" ref="audio" onload="test" class="audio" :src="url" controls="controls">浏览器不支持录音播放</audio>
    </span>
</template>

<script>
export default {
    props: ["url"],
    data() {
        return {
            status: 0, // 0 pause, 1 play
        }
    },
    mounted() {
        var self = this;
        let audio = this.$refs.audio;
        new MediaElementPlayer(audio);
        audio.addEventListener('play', function(e){ self.status = 1; })
        audio.addEventListener('pause', function(e){ self.status = 0; })
    }
}
</script>

实现的效果如下图

图3

给了覆写它的样式，我们需要把它用到的svg（一张sprite包含了用到的多个图标）download下来 sprite-default.svg，并且基于它复制一张 sprite-primary.svg，差别在于后者的fill使用的蓝色。

然后通过如下样式进行覆写，然后达成如下效果：

图4

<style lang="less">
.mejs__horizontal-volume-slider, .mejs__mute {
    display: none;
}
.mejs__controls, .mejs__container {
    overflow: hidden;
    border-radius: 13px!important;
    height: 25px!important;
}
.mejs__time-current, .mejs__time-loaded, .mejs__time-hovered {
    height: 5px;
}
.mejs__time-total {
    height: 4px;
}
.mejs__controls {
    bottom: 6px;
}
.mejs__button button {
    background-image: url('../../images/sprite-default.svg')!important;
    transform: scale(0.7);
}
.tsp-audio.playing {
    .mejs__currenttime {
        color: #5F9EFA;
    } 
    .mejs__button button {
        background-image: url('../../images/sprite-primary.svg')!important;
    }
}

.mejs__time-current {
    background: #5F9EFA;
}
.mejs__currenttime, .mejs__duration {
    color: #A4A4A4!important;
}

.mejs__time-total {
    background: #DEDEDE!important;
}

.mejs__container, .mejs__controls {
    background: #F6F6F6!important;
}
.el-table__row.current-row, 
.el-table__row:hover {
    .mejs__container, 
    .mejs__controls {
        background: #FFF!important;
    }
}
.el-table__row:not(.current-row):hover {
    .mejs__currenttime {
        color: #000;
    } 
    .mejs__button button {
        background-image: url('../../images/sprite-default.svg')!important;
        transform: scale(0.8);
    }
}

.mejs__time-handle {
    top: -2px;
    .mejs__time-handle-content {
        border: 1px solid #ccc;
    }
}
.mejs__time-float {
    display: none!important;
}
</style>