痒いところに手が届かないAudioタグ

オーディオ再生が簡単にできるAudioタグだが、おおまかな動かし方しかできないのが難点だった。
もしくは僕が使いこなせてないだけかも…

初期音量MAX

皆さん経験あると思いますが開幕の大爆音
鼓膜こわれちゃう

コントロールのUIがバラバラ

これが地味にきつかった、CSS崩れる。

Safari

その他

Howler.jsってのが凄いらしい

Howler.js公式サイト
使い方を覚えたらもっと凄いことができそうな予感
demoがめちゃくちゃ充実してるので見て欲しいです。

すんご

最適化されたReact-Howlerを使ったのでその使い方をメモ書き

React-Howlerの使い方

Github参照：React-Howler

npm install react-howler

ReactHowlerはUIを持たないので自分で用意する
再生エンジンとして載せる

使用例

再生ボタンとスライダーはMaterial-UIから

import React, { useState } from 'react'
import ReactHowler from 'react-howler'
import Slider from '@material-ui/core/Slider'
import PauseCircleOutlineIcon from '@material-ui/icons/PauseCircleOutline'
import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline'

const App = () => {

//再生停止と初期音量をuseStateで管理

 const [playing, setPlaying] = useState(false)
 const [volumeToggle, setVolumeToggle] = useState(0.2)

 const handleChange = (event, newValue) => {
    setVolumeToggle(newValue)
  }

 return (
   <ReactHowler      
     src='http://goldfirestudios.com/proj/howlerjs/sound.ogg'
     playing={playing}
     volume={volumeToggle}/>

//スライダーにて音量管理

   <Slider
     value={volumeToggle}
     min={0} step={0.001} max={1} 
     onChange={handleChange}/>

//再生・一時停止の条件分岐

   {playing
    ?<PauseCircleOutlineIcon
      onClick={() => setPlaying((state) => !state)}/>
    :<PlayCircleOutlineIcon
      onClick={() => setPlaying((state) => !state)}/>
   }
  )
}
export default App;

Propsの説明

一番使うであろうPropsのオプション類の日本語訳置いときます。
他にもイベント類だとか説明あるので参照してください。
Github参照：React-Howler

Prop	Default	Description
src		URLまたはbase64URI ファイルに拡張子が無い場合はformatプロパティで指定しなければならない可能性有り。srcを更新すると再生中のインスタンスが破棄され新しいインスタンスが作成される。
preload	true	trueでセットすると自動的にオーディオファイルをロードする。
playing	true	メディアの再生状況 true,falseで再生停止。初期ステータスをtrueに設定すると、ロードされた直後にオーディオが再生される。
loop	false	ループ再生の設定　デフォルトではfalse
mute	false	ミュート設定 trueでミュート
volume	1.0	0.0-1.0の間で音量の管理
html5	false	HTML5Audioの強制設定大きいサイズのオーディオはtrueにする必要有りデコード無しで再生されるためロードが早い
format	[]	howler.jsは基本的にファイル形式を自動的に検出するが、検出が機能しない場合は設定する必要あり。(SoundCloudのストリーム再生など)
xhr	{}	Webオーディオを使用する場合、howler.jsはXHRリクエストを使用してオーディオファイルをロードする必要有り。カスタムヘッダーを送信する必要がある場合は、HTTPメソッドを設定するか、withCredentialsを有効にして（リファレンスを参照）、このパラメーターにそれらを含めます。例: `<ReactHowler src="sound.webm" xhr={{ method: 'POST', headers: { Authorization: 'Bearer:' + token, }, withCredentials: true, }} />`

締め

個人的には初期ボリュームを調整できることと、srcを更新するという形でインスタンスを自動的に再作成してくれる点が使いやすかったです。

これは別の話ですが
.mapでリスト生成した際の再生状況個別管理もまあまあ頭を悩ませました。
そっちについても後々書いて行きます〜

AudioタグよりもHowler.jsの方が使いやすかった