Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。KB)JavaScriptでMP3を再生するライブラリ「playmp3.js」の作り方を解説します。MP3を再生するためにFlashの機能を利用します。JavaScriptからFlashの関数を呼び出す方法など、JavaScriptとFlashの連携方法も紹介します。Flashファイルの作成には、フリーのFlashコンパイラMTASCを利用しますので、Flashを持ってない人でも応用ライブラリを作成できるでしょう。Flashと連携することでJavaScriptの可能性を広げます。ActionScriptでMP3を再生する方法JavaScriptからFlashの関数を呼び出せるようにするFlash側(関数の登録)の対応方法JavaScript側(Flash関数の呼び出し)の対応方法FlashからJavaScriptを呼び出す方法まとめはじめにJavaScriptでMP3を再生するライブラリ「playmp3.js」の作り方を解説します。MP3の再生にはFlashの機能を利用し、JavaScriptからFlashの関数を呼び出すなど、JavaScriptとFlashの連携方法も併せて紹介します。Flashファイルの作成には、フリーのFlashコンパイラMTASCを利用しますので、Flashを持ってない人でも応用ライブラリを作成できるでしょう。Flashと連携することでJavaScriptの可能性が広がります。以下のサイトで、MP3再生のサンプルを試せます。MP3ライブラリの概要JavaScriptで作ったゲームや、ちょっとしたツールやアクセサリに効果音をつけたい場合があります。任意のタイミングでBGMを鳴らしたいこともあります。JavaScriptには、MP3を演奏する機能はついていません。Flashの機能を使うことでMP3を手軽に演奏できるようになります。本稿では、JavaScriptから手軽にMP3を演奏できるようなライブラリを作ります。このライブラリを使うと、次のような数行のコードを書くだけで、MP3が再生できるようになります。8を持っていなくても大丈夫です。今回は、フリーのFlashコンパイラのMTASCを使用してFlash部分を作ります(むしろ、数行のActionScriptを書くために、Flashを起動してコンパイルするのは手間がかかりますので、こんな時はMTASCが便利です)。ライブラリの使い方はじめに、ライブラリの使い方を紹介します。ライブラリを利用するには、本稿からダウンロードできるソースファイルに梱包されている3つのファイル(swfobject.js、playmp3.js、playmp3.swf)が必要です。再生したいMP3ファイル名が「bom.mp3」の時、次のようなプログラムをHTML中に記述します。href="javascript:playmp3.playFile('bom.mp3')">爆発音</a></body></html>ここで使用上の注意なのですが、サーバーにアップせず手元のパソコン(ローカルPC)で試した場合、Flashのセキュリティ制限のせいでMP3が再生されない場合があります。この場合の対処方法は2つあります。1つは、適当なFlashファイルを表示して右クリックし、[設定...]を選択します。プライバシーの[高度な設定]から[グローバルセキュリティ設定]パネルで、[これらのファイルとフォルダを常に信頼する]のリストにテストするフォルダを追加します。1つは、サーバーにアップロードして試す方法です。localhostでも問題ないので、ApacheやIISなどのHTTPサーバーを利用すればスムーズにテストできます。ライブラリのセットアップ「swfobject.js」と「playmp3.js」を取り込むとライブラリのセットアップは自動で行われます。そのため、後は再生したい場面で「playmp3.playFile('ファイル名')」のように書くと、MP3ファイルを再生できます。上で紹介した「playmp3.playFile('ファイル名')」は、毎回MP3ファイルをダウンロードして再生することになります。小さな効果音などは問題ないのですが、ある程度大きなファイルを再生したいときは不便です。そこで、事前にファイルをロードしておき、任意のタイミングで再生を行うようにする方法もあります。この場合、あらかじめ「swfobject.js」と「playmp3.js」を取り込んでおき、bodyタグのonLoadイベントで音楽ファイルの読み込みを行うようにします。番号);」と書きます。再生するときは「playmp3.playNo(番号)」と書きます。この番号は任意の番号を利用することができます。href="javascript:playmp3.playNo(1);">クリック音</a></body></html>MP3ファイルのロードを行うタイミングですが、ライブラリ取り込み直後だと関数がまだ利用できる状態になっていないので、必ずbodyタグのonLoadやその他のイベント内でロードするようにします。MP3ファイルがロードされないうちにクリックしても音が鳴りません。そこで、音声ファイルがロードされた後に再生用のリンクを表示するようなJavaScriptを書いてみます。このためには、「playmp3.loadNo("ファイル名",番号,"JavaScript関数名")」のように、3番目の引数に、ファイルのロードが完了した時に実行するJavaScriptの関数名を書いておきます(リンクの表示/非表示の切り替えには、JavaScriptのライブラリ「prototype.js」を使いました)。番号)」を使う方法では、番号を指定して、音量や定位(パン)を指定することができます。音量の設定には「playmp3.setVolumeNo(番号,音量)」を使います。音量には、0から100までを指定できます。定位は「playmp3.setPanNo(番号,定位値)」で、定位値には-100から100までの値を指定できます。80);}--></script>その他の機能その他、再生を止めたいときには「playmp3.stopNo(番号)」を使います。繰り返し再生を行いたい場合には、「playmp3.playNo(番号,オフセット位置,繰り返し回数)」と引数を付けて再生することができます。今回のようにJavaScriptだけでは不可能なことを、JavaScript以外と組み合わせて可能にする方法はいくつか考えられます。APIを使って拡張するFlashを使う方法では、今回のようにMP3を再生したり、データをローカルに保存したり、ビデオカメラを監視したり...と、JavaScriptではできない機能を実現できます。マルチメディア関係の再生では、QuickTimeのプラグインを使うのも手です。Flashでは、音楽ファイルのうちMIDIファイルを再生できないので、MIDIファイルが再生したいときはQuickTimeを使うと良いでしょう。多くの動画・音声に対応している点も見逃せません。APIを使って、JavaScriptでできないことを実現するのもよいでしょう。2024」関連発表まとめLeSSやSAFeなど、大規模アジャイルにおけるソフトウェア品質の課題とは?【オンライン技術書読書会のはじめかた】完璧じゃなくていい、雑談の延長線で開催してみませんか...もっと読むこの記事の著者クジラ飛行机(クジラヒコウヅクエ)ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。