audio标签隐藏audio的三个点的功能（倍速播放和下载）

一、需求

隐藏audio的这三个点的功能（倍速播放和下载），将这两个功能平铺到音频后。

<audio preload="metadata" controls :autoplay="false" :src="audioSrc"></audio>

期望效果

二、解决方式

1、隐藏倍速播放和下载
2、手动实现倍速播放及下载功能
3、vue实现

<div class="flex flex-wrap">
    <div class="audioBox mr-4 mb-4">
      <audio controlslist="nodownload noplaybackrate" preload="metadata" controls
      :autoplay="false" :src="audioSrc" :id="id"></audio>
      <div class="cur-pointer rateClass">
        <el-popover placement="bottom" trigger="click">
          <span slot="reference" class="speedPlayback"><svg-icon style="font-size: 20px;margin-right: 3px;" icon-class="playSpeed" />倍速播放</span>
            <div @click="handlePlaybackRate(rateItem.key)" v-for="(rateItem,rateIndex) in rateList" :key="rateIndex.key" class="rateItem cur-pointer"
            :style="{background:rateItem.key===rate?'#e8f4ff':'#fff'}">
              {{rateItem.value}}
            </div>
        </el-popover>
      </div>
    </div>
    <div class="flex items-center mb-4" style="font-size: 14px;">
      <div class="funItem" @click="handleDownload"><i style="font-size: 18px;" class="el-icon-download"></i>下载</div>
    </div>
  </div>

props: {
    audioSrc: {
      type: String,
      required: true
    },
    id:{
      type: String,
      required: true
    }
},
data() {
    return {
      showPopover:false,
      rateList:[
        {key:0.25,value:'0.25'},
        {key:0.5,value:'0.5'},
        {key:0.75,value:'0.75'},
        {key:1,value:'正常'},
        {key:1.25,value:'1.25'},
        {key:1.5,value:'1.5'},
        {key:1.75,value:'1.75'},
        {key:2,value:'2'}
      ],
      rate:1,
},
methods: {
    handlePlaybackRate(value){
      this.rate = value;
      document.getElementById(this.id).playbackRate=value;
    },
    handleDownload(){//方式一：这种方式h5中触发时播放音频没有触发下载。
      const link = document.createElement('a');
      link.href = this.audioSrc;
      link.style.display = 'none';
      document.body.appendChild(link);
      try {
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('下载失败:', error);
      }
    },
    handleDownload1(){//方式二
        axios({
            method: 'get',
            url: this.audioSrc,
            responseType: 'blob'
        }).then(res => {
            if (!res) {
                return;
            }
            let blobUrl = window.URL.createObjectURL(res.data);
            let link = document.createElement('a');
            document.body.appendChild(link);
            link.style.display = 'none';
            link.href = blobUrl;
            link.download = '下载音频文件.mp3';
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(blobUrl);
        })
    },
}

注：F12中audio标签只有一个元素，需要打开控制台设置

三、隐藏各功能方式

功能	实现方式
禁用全屏	controlslist="nofullscreen"
隐藏倍速播放	controlslist="noplaybackrate"
隐藏下载	controlslist="nodownload"
隐藏远程播放	controlslist="noremoteplayback"
隐藏画中画	disablePictureInPicture="true"
隐藏右键	oncontextmenu="return false"
隐藏全屏按钮	<style>video::-webkit-media-controls-fullscreen-button{display:none;}</style>
隐藏播放按钮	<style>video::-webkit-media-controls-play-button{display:none;}</style>
隐藏音量调节	<style>video::-webkit-media-controls-volume-control-container{display:none;}</style>
隐藏进度条	<style>video::-webkit-media-controls-timeline{display:none;}</style>

参考地址
audio属性参考