【React】HTML5のaudio要素で音楽を順番に再生する

Reactでライブラリ使わず、音楽を順番に再生させたいと思ったのでやってみました。

ソースコード
MusicPlayerコンポーネントに音楽のデータの配列を渡します。

App.js

import React, { Component } from 'react';
import MusicPlayer from './components/musicPlayer';

class App extends Component {
  render() {
    const musics = [
      {
        id: 1,
        src: "http://~/~.mp3"
      },
      {
        id: 2,
        src: "http://~/~.mp3"
      }
    ];
    return (
      <div>
          <MusicPlayer musics={musics} />
      </div>
    );
  }
}

export default App;

MusicPlayerコンポーネントで、音楽のデータの配列からMusicコンポーネントにデータを渡す。
そして、順番に音楽が流れるようにする。

components/musicPlayer.js

import React, { Component } from 'react';
import Music from './music';
export default class MusicPlayer extends Component {
  constructor(props) {
    super(props);
  }
  playMusic() {
    let musics = document.getElementsByClassName("music");
    musics =  Array.prototype.slice.call(musics);
    const playMusic = (n) => {
      musics[n].play();
      musics[n].addEventListener("ended",() => {
        if (n < musics.length) {
          playMusic(n + 1);
        }
      });
    }
    playMusic(0);
  }
  componentDidMount() {
    this.playMusic();
  }
  render() {
    return this.props.musics.map((music) => <Music {...music} />);
  }
}

Musicコンポーネントで、audio要素を作る。

components/music.js

import React from 'react';

const Music = (props) => {
  return <audio {...props} className="music" />;
}

export default Music;

ソースコード