1、web音频 Web Audio API

  1. const audioUrl = `https://assets.mixkit.co/music/preview/mixkit-hazy-after-hours-132.mp3`;
  2. const play_button = document.querySelector("play_button");
  3. const pause_button = document.querySelector("pause_button");
  5. class Demo {
  6.   constructor() {
  7.     this.audioContext = new AudioContext({ latencyHint: "balanced" });
  8.     this.audioSourceNode = null;
  9.     this.audioBuffer = null;
  11.     this.analyser = null;
  12.     this.bufferLength = null;
  13.     this.dataArray = null;
  14.     this.scriptProcessor = null;
  16.     this.gainNode = null;
  18.     this.draw = null;
  19.     this.canvas = null;
  20.     this.canvasCtx = null;
  22.     this.loading = false;
  23.     this.playing = false;
  24.     this.WAVFormatInfo = null;
  25.   }
  26.   async start(url) {
  27.     this.loading = true;
  28.     const musicArrayBuffer = await fetch(url).then((res) => res.arrayBuffer());
  30.     // this.initGain();
  31.     // this.initAnalyser();
  33.     this.audioContext.decodeAudioData(musicArrayBuffer).then(
  34.       (decodedData)=>{
  35.         this.loading = false;
  36.         this.playing = true;
  38.         this.audioBuffer = decodedData;
  39.         this.play(decodedData)
  40.       }
  41.     );
  42.   }
  43.   async play (buffer) {
  44.     if(buffer ?? this.audioBuffer){
  45.       this.audioSourceNode = this.audioContext.createBufferSource();
  46.       this.audioSourceNode.buffer = buffer ?? this.audioBuffer;
  47.       this.audioSourceNode.connect(this.audioContext.destination);
  48.       // this.audioSourceNode.connect(this.analyser);
  49.       // this.audioSourceNode.connect(this.gainNode);
  50.       this.audioSourceNode.start(0);
  51.     }
  52.   }
  53.   async pause() {
  54.     if(this.audioSourceNode){
  55.        this.audioSourceNode.stop();
  56.        this.playing = false
  57.     }
  58.   }
  59.   initGain () {
  60.     this.gainNode = this.audioContext.createGain();
  61.   }
  62.   initAnalyser () {
  63.     this.analyser = this.audioContext.createAnalyser();
  64.     //快速傅里叶变换参数
  65.     this.analyser.fftSize = 256;
  66.     //bufferArray长度
  67.     this.bufferLength = this.analyser.frequencyBinCount;
  68.     //创建bufferArray，用来装音频数据
  69.     this.dataArray = new Uint8Array(this.bufferLength);
  70.   }
  71. }
  72. const musicDemo = new Demo();
  73. play_button.onclick = () => musicDemo.start(audioUrl);
  74. pause_button.onclick = () => musicDemo.pause();

2、web 语音 Web Speech API

1. 语音合成 SpeechSynthesis

  1. let speechInstance = new SpeechSynthesisUtterance('大家好，我是渣渣辉。');
  2. speechSynthesis.speak(speechInstance);

附录