Reactで音楽ファイルを扱いたい！
そもそもWebサービスで音楽ファイルをバリバリ扱う事自体が悪手だという意見は置いておいて，
Webサービス，特にReactを使用したUI開発を行っていて，音楽ファイルや動画ファイルを扱いたくなるときがあると思います．
Reactは周辺ライブラリが多く，「あれやりたいなー」と思ったら大体OSSを使用すれば実現する環境が整っています．
動画・音楽ファイルに関しても同じで，ブラウザ上でサウンドを再生したい，もしくは動画埋め込みコンポーネントを作りたいときに使用できるOSSが存在します．
それがreact-playerです．
react-playerとは
動画や音楽ファイルをコンポーネントとして操作することができるようになるライブラリです．
というか，どちらかというと動画ファイルを簡単に扱うためのライブラリで，Youtube動画の埋め込みはもちろん，Facebookに投稿された動画やvimeo,twitchなどに投稿された動画をコンポーネントとしてUIに簡単に埋め込むことができます．
音声ファイルに関してはSoundcloudやMixcloudにアップロードされているものを埋め込むことが可能です．
ローカルファイルにおいてはmp3,mp4などが使用できます．
※IEで動作を保証するためにはbabel-polyfillを導入する必要があります．IE対応，難しいね…
使用できるファイルや動作確認については公式で用意されているデモページを参照してください．
インストール
npmコマンドやyarnコマンドで簡単に導入することが可能です．
$ npm install react-player --save #npmを使用するとき
$ yarn add react-player #yarnを使用するとき
使い方
ベーシックな使い方は以下のような感じになります．
import React, { Component } from 'react'
import ReactPlayer from 'react-player'
class App extends Component {
render () {
return <ReactPlayer url='ここにファイル名を入れる' playing />
}
}
propsについて
urlには，
- ストリーミングサービスからの埋め込みの時：使用したい動画や音楽の配信URL
- ローカルファイルを使用する場合：音楽ファイルもしくは動画ファイルを置いているパス
を記載します．
※ストリーミングサービスからの埋め込みでないローカルファイルを使用する場合，音楽や動画などのデータはAmazon S3やGoogle Cloudなどのオンラインストレージサービスにアップロードしておく必要があります
他，以下のprops（パラメータ）を渡すことで動画・音楽ファイルを制御することができます．
(よく使用しそうなもの一例)
| props名 | 処理 |
|---|---|
| url | 動画・音楽ファイルのパス |
| playing | 動画・音楽を再生するかどうか |
| loop | ループするかどうか |
| controls | ユーザーが動画ファイルをサービス固有のコントローラーで操作できるようにするかどうか(Vimeo,Twitchは設定に関係なくサービス特有のコントローラが表示される) |
| volume | 音量(0.0~1.0の間で設定) |
| muted | 音をミュートにするかどうか |
| playbackRate | プレイバックレートを設定する(Youtube，Wistia,ローカルファイルのみサポート) |
| width | 動画や音楽ファイルを埋め込むときの横幅 |
| height | 動画や音楽ファイルを埋め込むときの縦幅 |
| style | スタイルシートで装飾する場合に使用 |
| config | 使用するストリーミングサービスやファイル別にオーバーライドして使用したい設定を追加する |
Facebookから動画を取得してコンポーネント化する場合
Facebookから動画を取得するには，FacebookのアプリIDを作成・登録する必要があります．
アプリIDを作成したら，configpropのfacebook内にappIdというpropsがあるので，ここに取得したappIdを記入します．
<ReactPlayer
url={'hogehoge'}
config={
facebook: {
appId: '123456'
}
}
/>