关于css:关于-Audio-自定义样式

前置
对于 css 来设置 audio 款式
对于 JavaScript 来设置款式
对于 React 写一个自定义的 Audio 组件
总结

大抵理解 audio 属性
懂一点点 CSS
懂一点点 JS 与 audio 事件
懂一点点 React

援用 MDN 中的话应用 CSS 设置款式

audio 元素没有自带的固有视觉款式，除非如果申明了 controls 属性，则会显示浏览器的默认控件。
默认控件的 display 的默认值为 inline。将该值设为 block 通常会对定位和布局有益处，除非你想将控件放在文本块或相似元素中。
你能够应用作用于整个控件的属性来为其设置款式。例如可用 border、border-radius、padding, margin 等等。但你不能设置音频播放器中的单个组件（如扭转按钮大小、扭转图标或字体等）。控件在不同的浏览器中也有所不同。
如果在跨浏览器中失去统一的外观和体验，你须要创立自定义控件；自定义控件能够依据你的需要任意设置款式，还能够应用 JavaScript 和 HTMLMediaElement API 来设置更多功能。
视频播放器款式根底提供了一些有用的款式技术，这篇文章围绕 video 而写，但大部分都能够用于 audio。

总上所述，要害就是在于 css 可操作性绝对少，且会产生对于兼容性的问题，集体也仅作为

说是 JavaScript，仍然也须要配合到 css 外面来的（不然不难看

筹备一个, 最简略的带有 audio 的 html，并把安排好布局
要害 JavaScript 代码
- 2.1 筹备参数
- 2.2 播放 && 暂停 && 进度更新
- 2.3 拖动进度条
配合 css 食用
筹备一个, 最简略的带有 audio 的 html，并把安排好布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Audio DIY</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>
  <body>
    <audio
      id='audio'
      src='https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3''
      preload='metadata' ></audio>
    <div class="audio-container">
      <div class="audio-toggle" id="control">
        播放
      </div>
      <div class="audio-progress-box" id='progress'>
        <span class="progressDot" id="control-dot"></span>
        <div class="audio-progress-bar" id="control-progress"></div>
      </div>
      <div class="audio-time" id="‘time’">
        <span id='current'>00:00</span> / <span id='duration'>00:00</span>
      </div>
    </div>
  </body>
  <script src="./audio.js"></script>
</html>

2.1 筹备参数

const Audio              = document.querySelector('#audio');
const contorl            = document.querySelector('#control');
const contorlDot         = document.querySelector('#control-dot');
const contorlProgress    = document.querySelector('#control-progress');
const contorlProgressBox = document.querySelector('#progress');
const current            = document.querySelector('#current');
const duration           = document.querySelector('#duration');

// 工具函数
// 时分秒转换
function transTime(value) {
  var time = '';
  var h = parseInt(`${value / 3600}`);
  value %= 3600;
  var m = parseInt(`${value / 60}`);
  var s = parseInt(`${value % 60}`);
  if (h > 0) {time = formatTime(h + ':' + m + ':' + s);
  } else {time = formatTime(m + ':' + s);
  }

  return time;
}
// 补零
function formatTime(value) {
  var time = '';
  var s = value.split(':');
  var 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;
}

2.2 播放 && 暂停 && 进度更新

contorl.addEventListener('click', e => {if (e.target.innerText === '播放') {
    e.target.innerText = '暂停';
    Audio.play();} else {
    e.target.innerText = '播放';
    Audio.pause();}
});

Audio.addEventListener('loadedmetadata', e => {duration.innerText = transTime(e.target.duration);
});

Audio.addEventListener('timeupdate', e => {
  let value = e.target.currentTime / Audio.duration;
  current.innerText = transTime(e.target.currentTime);
  contorlProgress.style.width = `${value * 100}%`;
  contorlDot.style.left = `${value * 100}%`;
});

Audio.addEventListener('ended', e => {
  contorlProgress.style.width = '0%';
  contorlDot.style.left = '0%';
  contorl.innerText = '播放';
});

2.3 拖动进度条

// 鼠标按下
contorlDot.addEventListener('mousedown', down, false);
contorlDot.addEventListener('touchstart', down, false);

// 开始拖动
document.addEventListener('mousemove', move, false);
document.addEventListener('touchmove', move, false);

// 拖动完结
document.addEventListener('mouseup', end, false);
document.addEventListener('touchend', end, false);

const position  = {
  oriOffestLeft : 0, // 挪动开始时进度条的点间隔进度条的偏移值
  oriX          : 0, // 挪动开始时的 x 坐标
  maxLeft       : 0, // 向左最大可拖动间隔
  maxRight      : 0, // 向右最大可拖动间隔
};
let flag        = false; // 标记是否拖动开始

const down = event => {if (!Audio.pause || Audio.currentTime !== 0) {
    flag = true;

    position.oriOffestLeft = contorlDot.offsetLeft;
    position.oriX          = event.touches ?
                             event.touches[0].clientX :
                             event.clientX;
    // 要同时适配 mousedown 和 touchstart 事件
    position.maxLeft       = position.oriOffestLeft;
    // 向左最大可拖动间隔
    position.maxRight      = contorlProgressBox.offsetWidth -
                             position.oriOffestLeft; // 向左边最大可拖动间隔

    if (event && event.preventDefault) event.preventDefault();
    else event.returnValue = false;

    if (event && event.stopPropagation) event.stopPropagation();
    else window.event.cancelBubble = true;
  }
};
const move = event => {if (flag) {let clientX = event.touches ? event.touches[0].clientX : event.clientX;
    let length  = clientX - position.oriX;
    if (length > position.maxRight) {length = position.maxRight;} else if (length < -position.maxLeft) {length = -position.maxLeft;}

    let pgsWidth = parseFloat(window.getComputedStyle(contorlProgressBox, null).width.replace('px'),
    );

    let rate = (position.oriOffestLeft + length) / pgsWidth;

    Audio.currentTime = Audio.duration * rate;
  }
};

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

框架加持会让组件更加简略，chch

import React, {
  useRef,
  useLayoutEffect,
  useState,
  useEffect,
  MouseEvent,
} from 'react';
import './Audio.css';


function transTime(value: number) {
  var time = '';
  var h = parseInt(`${value / 3600}`);
  value %= 3600;
  var m = parseInt(`${value / 60}`);
  var s = parseInt(`${value % 60}`);
  if (h > 0) {time = formatTime(h + ':' + m + ':' + s);
  } else {time = formatTime(m + ':' + s);
  }

  return time;
}

function formatTime(value: string) {
  var time = '';
  var s = value.split(':');
  var 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;
}

export const Audio: React.FC<any> = props => {const { src, width = '80%', height = '30px'} = props;

  const audioRef                      = useRef<HTMLAudioElement>(null);
  const barBgRef                      = useRef<HTMLDivElement>(null);
  const barRef                        = useRef<HTMLDivElement>(null);
  const dotRef                        = useRef<HTMLSpanElement>(null);
  const uidRef                        = useRef<string>(uniqueId());

  const [toggle, setToggle]           = useState<boolean>(true);
  const [progress, setProgress]       = useState<number>(0);
  const [duration, setDuration]       = useState<string>('00 : 00');
  const [currentTime, setCurrentTime] = useState<string>('00:00');

  useLayoutEffect(() => {if (audioRef.current && src) {audioRef.current.addEventListener('play', (e: Event) => {const pid    = (e.target as HTMLAudioElement).getAttribute('pid');
        const audios = document.querySelectorAll('audio');
        console.log('pid', pid);
        audios.forEach((element, index) => {if (element.getAttribute('pid') === pid) return;
          element.pause();});
      });

      audioRef.current.addEventListener('loadedmetadata', e => {
        const duration = transTime((e.target as HTMLAudioElement).duration as number,
        );
        setDuration(duration);
      });
      audioRef.current.addEventListener('play', _res => {setToggle(false);
      });
      audioRef.current.addEventListener('pause', () => {setToggle(true);
      });
      audioRef.current.addEventListener('timeupdate', e => {
        let value =
          (e.target as HTMLAudioElement).currentTime /
          (audioRef.current as HTMLAudioElement).duration;
        setProgress(value * 100);
        setCurrentTime(transTime((e.target as HTMLAudioElement).currentTime));
        // console.log('timeupdate res', res.target.currentTime);
      });
    }
    return () => {};
  }, [src]);

  useEffect(() => {if (dotRef.current && src) {
      const position  = {
        oriOffestLeft : 0, // 挪动开始时进度条的点间隔进度条的偏移值
        oriX          : 0, // 挪动开始时的 x 坐标
        maxLeft       : 0, // 向左最大可拖动间隔
        maxRight      : 0, // 向右最大可拖动间隔
      };
      let flag        = false; // 标记是否拖动开始

      // 按下
      const down = (event: TouchEvent | MouseEvent) => {if (!audioRef.current?.paused || audioRef.current.currentTime !== 0) {
          flag                   = true;
          position.oriOffestLeft = dotRef.current?.offsetLeft ?? 0; // 初始地位
          position.oriX          = position.oriX =
            event instanceof TouchEvent
              ? event.touches[0].clientX
                                 : event.clientX; // 要同时适配 mousedown 和 touchstart 事件
          position.maxLeft       = position.oriOffestLeft; // 向左最大可拖动间隔
          position.maxRight      =
            barBgRef.current?.offsetWidth ?? 0 - position.oriOffestLeft; // 向左边最大可拖动间隔

          if (event && event.preventDefault) {event.preventDefault();
          } else {(event as TouchEvent).returnValue = false;
          }

          // 禁止事件冒泡
          if (event && event.stopPropagation) {event.stopPropagation();
          }
        }
      };
      // 挪动
      const move = (event: TouchEvent | MouseEvent) => {if (flag && barBgRef.current) {
          let clientX =
                        event instanceof TouchEvent
                        ? event.touches[0].clientX
                        : event.clientX; // 要同时适配 mousemove 和 touchmove 事件

          let length  = clientX - position.oriX;
          if (length > position.maxRight) {length = position.maxRight;} else if (length < -position.maxLeft) {length = -position.maxLeft;}
          // let pgsWidth = barBgRef.current?.offsetWidth;
          let pgsWidth = parseFloat(window.getComputedStyle(barBgRef.current).width.replace('px', ''),
          );
          let rate = (position.oriOffestLeft + length) / pgsWidth;

          console.log('===', position.oriOffestLeft, length);

          console.log(
            '偏移总长比例',
            (audioRef.current as HTMLAudioElement).duration * rate,
            rate,
          );
          (audioRef.current as HTMLAudioElement).currentTime =
            (audioRef.current as HTMLAudioElement).duration * rate;
        }
      };
      // 完结
      const end = () => {flag = false;};

      // 鼠标按下时
      dotRef.current.addEventListener('mousedown', down as any, false);
      dotRef.current.addEventListener('touchstart', down, false);

      // 开始拖动
      document.addEventListener('mousemove', move as any, false);
      document.addEventListener('touchmove', move, false);

      // 拖动完结
      document.addEventListener('mouseup', end, false);
      barBgRef.current?.addEventListener('touchend', end, false);
    }
  }, [src]);

  const handlePaly = () => {if (toggle && src) {audioRef.current?.play();
      return;
    }
    audioRef.current?.pause();
    return;
  };

  return (
    <>
      <audio
        // @ts-ignore
        pid={uidRef.current}
        controls={false}
        src={src}
        preload='metadata'
        ref={audioRef}>
        您的浏览器不反对 audio 标签
      </audio>
      <div className='audio-container' style={{width, height}}>
        <div className='audio-toggle' onClick={handlePaly}>
          {toggle && src ? '>' : '||'}
        </div>
        <div className='audio-progress-bar-bg' ref={barBgRef}>
          <span
            ref={dotRef}
            className='progressDot'
            style={{left: `${progress - 2}%` }}></span>
          <div
            ref={barRef}
            className='audio-progress-bar'
            style={{width: `${progress}%`,
            }}></div>
        </div>
        <div className='audio-time'>
          {currentTime}/{duration}
        </div>
      </div>
    </>
  );
};

export default Audio;

PS：原生内有个性能是下载，这里并没有实现

对于 JS 代码局部，大部分参考至这里 H5 audio 音频标签自定义款式批改以及增加播放管制事件

需要起因，原生款式仿佛并不能满足产品，就会呈现须要 DIY 的状况，集体参照了很多网上相干的 Blog，如有谬误，敬请指教

感激浏览

参考文章

H5 audio 音频标签自定义款式批改以及增加播放管制事件
HTML audio 根底 API 齐全使用指南
MDN_audio

前置

对于 css 来设置 audio 款式

对于 JavaScript 来设置 audio 款式

对于 React 写一个自定义的 Audio 组件

总结