105)プレイヤーを作った話
JavaScriptを使って、オーディオプレイヤーを作った。再生・停止、シークバーでの移動はもちろん、特定のプレイヤーを再生中に、他のプレイヤーを再生すると、直前に再生したプレイヤーが一時停止する、など最低限の機能はもたせたつまりだ。あとは、波形を表示させるくらいだろうか。プレイヤーを下部に3つ設置してみたので試してほしい。たまに演奏時間がとれなかったり、記号の表示がうまく処理されないこともあるが、許容範囲だと思う(演奏時間は静的だから、直接記述すれば解決する)。ちなみに、Internet Explorer(IE)といったレガシーブラウザは、JavaScriptのES2015という規格に未対応なためプレイヤーの再生は不可能である。
初めてのJavaScriptにしては、なかなかよくできたと思うが(見た目は)、かなり苦戦したのも事実である。今まで、CやBashなど、言語仕様としてはあまり多機能でない言語を中心に触ってきたのと、今回のように、画面上でマウスで操作するプログラム(GUI)を書いたことがなかったからだ。そしてなによりもHTMLの要素を操作するDOM(Document Object Model)でかなり難儀した。また、JavaScriptは、オブジェクト指向型言語だが、手続き型で書いてしまった。これは、あまり良いコードとはいえないだろうし、いつか書き直したい。
自サイトで音楽を直接提供する上で気になるのは、やはり音楽ファイルのサイズ、すなわち転送量である。wavファイルをmp3ファイルに圧縮する際のレートを128kbps、96kbps、64kbpsのどれにするか悩む。音質とファイルサイズはトレードオフの関係であるが、急激に変化するポイントがある。128kbpsは音質は悪くないがサイズが重い、64kbpsはサイズは軽いが音質が明確に悪く、また本来は気にならない音が前に出てくる。ということで、とりあえず折衷の96kbpsにしたが、曲によってレートを使い分けるのがよさそうだ。音声データを圧縮したファイルサイズの遷移を表にしたので、参考にしてほしい。基本的には、ある値が倍変化するとサイズも倍変化する、と考えてよい。
形式 | レート | サイズ |
---|---|---|
wav | 44.1kHz | 13.1MB |
mp3 | 128kbps | 1.1MB |
mp3 | 92kbps | 817KB |
mp3 | 80kbps | 689KB |
mp3 | 64kbps | 557KB |
古い音源を発掘したその後。プレイヤーも完成したので、一曲公開する。《トリオソナタ?》という題だ。トリオソナタとは、3台の旋律楽器と和音を出す鍵盤楽器の4人で編成された器楽曲だが、それしか分からずに書いた曲だろう。Singer Song Writer 3.0からMIDIでエクスポートして、Finaleで読み込んで大修正した。出だしはなんとくなーく記憶にあるが、いつ、どうして書いたのか、といった記憶が全くないが、10代末頃に書いた曲だと思う。また他の曲として、Cubase5を買った頃に書いたフォーレ風な曲と、レゾナンス(一般的にハーモニクスと呼ばれる)を聞く、自動演奏ピアノの曲を用意した。
プレイヤーの作成には、いくつかのサイトを参考にした。中でも最もお世話になったのは、「HTML5のaudioタグを使って音楽を再生する」という記事である。
2020-02-02