音频如何只保留播放按钮？

众所周知，h5有视频（video）和音频（audio）两种标签。

<video src="movie.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>
<audio src="someaudio.ogg">
您的浏览器不支持 audio 标签。
</audio>

标签的书写形式很简单，那如何只保留播放和暂停按钮呢？ music.png

如图所示，这个标签只保留了一个播放按钮，我们无法直接使用h5标签来实现。怎么办呢？
其实很简单，就像图片Image对象，js也提供了Video和Audio对象，对地址（src）、播放（play）、暂停（pause）这些动作都做了封装，这样我们就不用再绞尽脑汁隐藏h5标签了。

<template>
    <div @click="playAudio(plot)" class="plot-item-audio">
        <span class="iconfont" :class="{'gp-play':!isPlay,'gp-pause':isPlay}"></span>
    </div>
</template>

<script>
    export default {
        name: 'music',
        data() {
            return {
                isPlay: false,
                plot: {
                    original_url: '../music.ogg'
                },
                myAudio: null,
            }
        },
        mounted() {
            this.myAudio = new Audio();
        },
        methods: {
            playAudio(plot) {
                console.log('audio>>>', plot);
                this.isPlay = !this.isPlay;
                this.myAudio.src = plot.original_url;
                if (this.isPlay) {
                    this.myAudio.play();
                    this.playEnd();
                } else {
                    this.myAudio.pause();
                    this.playEnd();
                }

            },
            playEnd() {
                this.myAudio.addEventListener('ended', () => {
                    console.log('音频播放停止');
                    this.isPlay = false;
                }, false);
            }
        }
    }
</script>