HTMLで使えるオーディオビジュアライザータグを作ってみる

> npm install -g @angular/cli
> ng new audio-visualizer --style=scss --routing=false
> cd audio-visualizer
> ng add @angular/elements

> ng version
Angular CLI: 9.1.8
...
Angular: 9.1.11
...

import {Component, Input, OnDestroy, OnInit} from '@angular/core';
@Component({
  templateUrl: 'audio-visualizer.component.html',
  styleUrls: ['audio-visualizer.component.scss']
})
export class AudioVisualizerComponent implements OnInit, OnDestroy {
  @Input() src: string;
  private SPECTRUM_MAX_VALUE = 4;
  private SPECTRUMS_LENGTH = 64;
  private SPECTRUMS_UPDATE_INTERVAL = 50;
  public spectrums: Array<number>; // L:0～31, R:32～63
  public audio: HTMLMediaElement;
  private context: AudioContext;
  private source: MediaElementAudioSourceNode;
  private splitter: ChannelSplitterNode;
  private analysers: Array<AnalyserNode> = [];
  private merger: ChannelMergerNode;
  private timer: number;
  ngOnInit(): void {
    this.spectrums = new Array<number>(this.SPECTRUMS_LENGTH);
    this.audio = new Audio(this.src);
    this.audio.addEventListener('ended', () => {
      this.stopUpdateSpectrums();
    });
    this.context = new AudioContext();
    this.source = this.context.createMediaElementSource(this.audio);
    this.analysers.push(this.context.createAnalyser());
    this.analysers.push(this.context.createAnalyser());
    this.analysers[0].fftSize = this.analysers[1].fftSize = this.SPECTRUMS_LENGTH;
    this.analysers[0].smoothingTimeConstant =
      this.analysers[1].smoothingTimeConstant = 0.5;
    this.splitter = this.context.createChannelSplitter(2);
    this.merger = this.context.createChannelMerger(2);
    this.source.connect(this.splitter);
    this.splitter.connect(this.analysers[0], 0, 0);
    this.splitter.connect(this.analysers[1], 1, 0);
    this.analysers[0].connect(this.merger, 0, 0);
    this.analysers[1].connect(this.merger, 0, 1);
    this.merger.connect(this.context.destination);
  }
  ngOnDestroy(): void {
    this.stopUpdateSpectrums();
    this.merger.disconnect();
    this.analysers[0].disconnect();
    this.analysers[1].disconnect();
    this.splitter.disconnect();
    this.source.disconnect();
    this.context.close();
  }
  onClick() {
    if (this.audio.paused) {
      this.context.resume();
      this.audio.play().then(() => {
        this.startUpdateSpectrums();
      });
    } else {
      this.context.suspend();
      this.audio.pause();
      this.stopUpdateSpectrums();
    }
  }
  private startUpdateSpectrums(): void {
    this.stopUpdateSpectrums();
    this.timer = setInterval(() => {
      const channelSpectrums = new Uint8Array(this.SPECTRUMS_LENGTH / 2);
      this.analysers[0].getByteFrequencyData(channelSpectrums);
      channelSpectrums.forEach((x, i) =>
        this.spectrums[i] = x * this.SPECTRUM_MAX_VALUE / 255);
      this.analysers[1].getByteFrequencyData(channelSpectrums);
      channelSpectrums.forEach((x, i) =>
        this.spectrums[channelSpectrums.length + i] =
          x * this.SPECTRUM_MAX_VALUE / 255);
    }, this.SPECTRUMS_UPDATE_INTERVAL);
  }
  private stopUpdateSpectrums(): void {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
}

<svg width="100%" height="100%" viewBox="0, 0, 48, 48">
  <circle (click)="onClick()" cx="24" cy="24" r="15"></circle>
  <path *ngIf="audio.paused" d="M21 19 L29 24 L21 29 Z"></path>
  <g *ngIf="!audio.paused">
    <rect x="20" y="19" width="3" height="10"></rect>
    <rect x="25" y="19" width="3" height="10"></rect>
  </g>
  <ng-container *ngFor="let x of spectrums; let i = index">
    <rect x="24" y="40" width="1" [attr.height]="x"
      attr.transform="rotate({{360 * (-audio.currentTime * 7 + i) / 64}}, 24, 24)">
    </rect>
  </ng-container>
</svg>

:host {
  display: inline-block;
  width: 72px;
  height: 72px;
}
svg {
  rect, path {
    pointer-events: none;
    fill: #003b72;
  }
  circle {
    fill: transparent;
    stroke: #003b72;
    stroke-width: 0.5;
    &:hover {
      fill: rgba(0, 59, 114, 0.07);
    }
  }
}

import {BrowserModule} from '@angular/platform-browser';
import {ApplicationRef, Injector, NgModule} from '@angular/core';
import {AudioVisualizerComponent} from './audio-visualizer.component';
import {createCustomElement} from '@angular/elements';
@NgModule({
  declarations: [
    AudioVisualizerComponent
  ],
  imports: [
    BrowserModule
  ]
})
export class AppModule {
  constructor(private injector: Injector) {
  }
  ngDoBootstrap(app: ApplicationRef) {
    customElements.define('audio-visualizer', createCustomElement(
      AudioVisualizerComponent, { injector: this.injector}));
  }
}

<body>
  <audio-visualizer src="assets/test.mp3"></audio-visualizer>
</body>

> ng serve
...
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully

> ng build --prod --output-hashing=none
> cd dist/audio-visualizer
> type main-es2015.js polyfills-es2015.js runtime-es2015.js > audio-visualizer.js

<script src="audio-visualizer.js" type="module"></script>

<audio-visualizer src="path/to/music.mp3"></audio-visualizer>