tlaternet-templates/src/music/MusicPlayer.tsx

import React from "react";
import { connect } from "react-redux";

import Controls from "./components/controls";
import Visualizer from "./components/visualizer";
import { State } from "./store";

type AudioState = {
  audioContext: AudioContext;
  audioSource: HTMLAudioElement;
  audioSourceNode: MediaElementAudioSourceNode;
  audioVolume: GainNode;
};

type MusicPlayerProps = {
  playing: boolean;
  muted: boolean;
  source?: string;
};

class MusicPlayer extends React.Component<MusicPlayerProps, State> {
  private audioState: AudioState;

  constructor(props: MusicPlayerProps) {
    super(props);

    const context = new AudioContext();
    const source = new Audio();
    const sourceNode = context.createMediaElementSource(source);
    const volume = context.createGain();

    sourceNode.connect(volume);
    volume.connect(context.destination);

    this.audioState = {
      audioContext: context,
      audioSourceNode: sourceNode,
      audioSource: source,
      audioVolume: volume,
    };
  }

  render() {
    return (
      <div id="player" style={{ height: "100%", width: "100%" }}>
        <Visualizer
          audioContext={this.audioState.audioContext}
          audioSource={this.audioState.audioSourceNode}
        />
        <Controls />
      </div>
    );
  }

  componentDidUpdate() {
    const context = this.audioState.audioContext;
    const source = this.audioState.audioSource;
    const volume = this.audioState.audioVolume;

    // First, set the audio source (if it changed)
    if (this.props.source && source.src != this.props.source) {
      source.src = this.props.source;
    }

    if (this.props.playing) {
      source
        .play()
        .then(() => {
          console.info("Started playing audio");
        })
        .catch((error) => {
          console.error(`Could not play audio: ${error}`);
        });
    } else {
      source.pause();
    }

    if (!this.props.muted) {
      volume.gain.setValueAtTime(1, context.currentTime);
    } else {
      volume.gain.setValueAtTime(0, context.currentTime);
    }
  }
}

function mapStateToProps(state: State): MusicPlayerProps {
  return {
    playing: state.musicState.playing,
    muted: state.musicState.muted,
    source: state.musicState.source,
  };
}

export default connect(mapStateToProps)(MusicPlayer);