結論
自分で作ったほうが楽しいし、こだわりの音楽プレイヤーが作れる。
つ ま り 楽 し い 。
やりたかったこと
(難易度順(独断と偏見による))
- 曲のランダム再生
- 曲の検索とかはいらない
- 曲名、アーティスト名、アルバム名の表示
-
特殊なクロスフェード
- 5秒かけてフェードアウト、フェードアウト2秒目で次の曲がカットイン
- これで曲を送るといい感じに曲の終わりと初めが繋がりやすい(と筆者は思った)
-
8バンド以上、±24以上のカスタムイコライザ
- イコライザプリセットの保存
やってみた
さっそく問題発生
$(function(){
$('audio').get(0).play(); // プレイされない
});
デスクトップブラウザでも音付きの動画や音声がjsから自動再生できないようになっていた！！
(audio要素のautoplay属性も効きませんでした)
Safari, Chromeの自動再生ポリシー変更のまとめ
-
特定の条件が満たされないと自動再生されない
- 筆者のメインブラウザChromeでは独自にサイト毎のプレイバックレートで管理されている(意図的に操作はできない)
- ユーザの操作(クリック)発射の関数内の.load()や.play()は効く
- onload()内などで.play()しても直後に.pause()される
なので、しぶしぶPLAYボタンを作るのであった。
曲のランダム再生
曲のファイルパスを配列にし、
配列の中身をランダムにaudioタグに放り込んだ。
曲名、アーティスト名、アルバム名の表示
PHPでgetID3()を利用することで曲情報を曲ファイルから抽出できた
getID3()を使った音楽ファイルの情報取得
曲情報を入力したツールや、曲のエンコードに使ったツールによってID3v2のデータ構造が変わるっぽいので注意(よくわかっていない)
ただ連想配列のKeyは同じっぽいので、配列全部のKeyをチェックして(多次元になってるのも全部)、該当KeyのValueを集めた。
デバッグも含め、以下の情報を抽出した。
- title
- artist
- album
- album_artist
- replaygain_track_gain // <- 音量を均一化するための調整量
- sort_title // <- iTunes独自の、曲名の読み方
- playtime_seconds
- filesize
- encoding_tool
- encoding
- codec
その際、どうしても10進文字コードとして化けて出てくるファイルがあったので、ゴリ押しでデコードしました。(許してほしい)
【ᐛ】 JSでHTML10進コードをデコードする記事が見つからなかった
特殊なクロスフェード
まず、audioタグを2つ用意した。
プレイ中のaudioを5秒かけてフェードアウトしながら、フェードアウトの2秒目にもう片方のaudioを再生。
副産物として、Next Play が取得できるようになった(
8バンド以上、±24以上のカスタムイコライザ
ここからWeb Audio APIの出番ですよ
Web Audio API の勉強 - グラフィックイコライザーを作る
イコライザー | エフェクター | WEB SOUNDER - Web Audio API 解説 -
[概要]
BiquadFilterをイコライザのバンドの数だけ作り、audio要素のMediaElementSourceから数珠つなぎにつなげていく。
BiquadFilterのフィルターにはピーキング(特定の周波数の周りを増減する)を指定。
各バンドの周波数やピーキングの影響幅をいれておく。(ようはBiquadFilter1つ1つがEQつまみみたいになってる)
Audio要素の[MediaElementSource] ←ここに音声ファイル
┗バンド1(125Hz)の[BiquadFilter] ←ここに バンド1のボリューム + 全体のボリューム + 曲のリプレイゲイン
┗バンド2(250Hz)の[BiquadFilter] ←ここに バンド2のボリューム + 全体のボリューム + 曲のリプレイゲイン
┗バンド3(500Hz)の[BiquadFilter] ←ここに バンド3のボリューム + 全体のボリューム + 曲のリプレイゲイン
┗バンド4(1kHz)の[BiquadFilter] ←ここに (以下略
┗バンド5(2kHz)の[BiquadFilter]
┗バンド6(4kHz)の[BiquadFilter]
┗バンド7(8kHz)の[BiquadFilter]
これで好きなだけ曲をドムドムシャカシャカさせることができるようになった！
これから実装したい
- SQLによる曲の管理
- 曲の検索とかできるようになる
- ID3v2タグにない情報も保持できる(再生回数やスキップ回数、いいね てきなものなど)
- それら情報をもとに自分の好みにより近いランダムアルゴリズムが組みたい(超将来的に)
- 再生速度コントローラー
- ちょっと1.2xとかで音楽聞くといつもよりアガれる(
- ビジュアルイコライザ
- 波形見ながらイコライザ調整できたら楽だな…
- スマホでも使いたい
- アプリ化しないと無理ということが今回わかった