2017年3月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
無料ブログはココログ

« 自殺の名所と言うけれど…… | トップページ | 豊郷小学校旧校舎 »

2011.04.05

JavaScriptでMP3再生の試行錯誤の覚え書き(その1)

PHP + PostgreSQLでCD管理プログラムを作っています。
購入したCDの曲をiTunesでMP3として保存しているので、iTunesのxmlからデータを取得してDBに取り込むことで持っているCDの管理が出来るのではないかと考えたのが発端でした。
元々PHPの勉強として始めたもので、作り始めたのは5年以上前になります。気が向くと少しずつ修正したり機能を追加したりしていましたが、最近は使っていませんでした。
しかし先日、曲名一覧の曲名をクリックすると、その曲を再生できたらいいな、と思いついて、ブラウザでMP3を再生する方法について少し調べてみました。

Flashを使ったりすることが多いようですが、ブラウザにはFirefoxを使っており、他のブラウザでの動作は考慮しないということで、一番簡単にできそうな方法がJavaScriptを使った方法でした。

以下のスクリプトを作成します。
// 再生
function soundPlay(soundfile) {
    var option = '"';
    option += ' type="video/quicktime"';
    option += ' autoplay="true"';
    option += ' width="320"';
    option += ' height="20"';
    option += ' loop="true"';
    option += ' volume="30"';
    document.getElementById("player").innerHTML
        = '<embed src="' + soundfile + option + ' />';
    document.getElementById("playstop").disabled = false;
    return false;
}

// 停止
function soundStop() {
    document.getElementById("player").innerHTML = '';
    document.getElementById("playstop").disabled = true;
    return false;
}

html側は、コントローラの表示領域と停止ボタンを
<div id="player" style="width:320px;height:20px;"></div>
<input id="playstop" type="button" value="停止"
       onclick="javascript:soundStop()" disabled>
などと作っておいて、曲名のリンク先を
<a href="javascript:soundPlay('/xxx/yyy/zzz.mp3');">
    曲のタイトル
</a>
のようにしておけばとりあえず再生できました。

FirefoxではMP3の再生にはQuicktimeが使われるそうです。
PCにはiTunesをインストールしていますので、QuicktimeのPlug-inもインストールされています。
特定の環境で動けばよいので、とりあえずこれで目的は達成できたように思えました。

ところが……

(その2に続く)

« 自殺の名所と言うけれど…… | トップページ | 豊郷小学校旧校舎 »

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/39755/51304015

この記事へのトラックバック一覧です: JavaScriptでMP3再生の試行錯誤の覚え書き(その1):

« 自殺の名所と言うけれど…… | トップページ | 豊郷小学校旧校舎 »

にほんブログ村

Amazon.co.jp