audio 小记

简介

音频的样式更改，其实说难不难，如果用 方法 https://stackoverflow.com/questions/4126708/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

是不能更改比如说按键颜色的。

还是要采用

Play
Pause
Vol +
Vol -

这种方法可以参考 https://segmentfault.com/a/1190000012453975

还有一个问题 如何下载 音频的问题

1. 如果你 音频数据“同源” 解决很简单 (简单来说就是没有跨域问题)
   
   <a download href="link" target="_blank">
2. 如果你的有音频数据有“同源” 问题
   
   参考连接 https://zhuanlan.zhihu.com/p/58888918
   
   简单来说就是这两个函数

function download(href, filename = '')  {
  const a = document.createElement('a')
  a.download = filename
  a.href = href
  document.body.appendChild(a)
  a.click()
  a.remove()
}

function downloadFile(url, filename='') {
  fetch(url, {
    headers: new Headers({
      Origin: location.origin,
    }),
    mode: 'cors',
  })
    .then(res => res.blob())
    .then(blob => {
      const blobUrl = window.URL.createObjectURL(blob)
      download(blobUrl, filename)
      window.URL.revokeObjectURL(blobUrl)
    })
}