fedoraサーバ上に例えばこういうmp3ファイルがあって
Apacheで自宅内公開されているとする。
クリックすると再生する。これはブラウザ(Safari)の標準動作。
しかしこれだとループ再生できない。クリックしたらループで再生してほしい。気に入った曲はとにかく延々と流し続けて欲しい。
調べた。HTML5だとループ再生できるみたい。属性に「loop」がある。
早速コード書いてみる。
$ vim doMP3test.html
動作テスト。ブラウザから http://サーバ名/doMP3test.html でアクセス。
読み込みが開始(preload)し、自動で曲の再生がスタート(autoplay)する。
曲が終わりになると
自動で先頭に戻ってループ再生する(loop)。
HTML5最高だ。
コピペ用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>html5で音声ループ再生テスト</title>
</head>
<body>
<audio src="aimyon_MG.mp3" autoplay loop controls preload="auto">
</audio>
</body>
</html>
さらに応用すると例えばこんなことができる。
サーバに公開しているフォルダにあるmp3ファイル全てについて、ループ再生するための再生ボタンを作るphp
mp3でgrepして表示されたmp3ファイルをループ再生できる。iPhoneだろうがAndroidだろうが関係ない。HTML5に対応したブラウザさえあればループ再生してBGM鳴らせる。
ソースはこれ(一部抜粋)
919行目 phpのglob関数でフォルダ内にあるmp3ファイルを読み込んで配列へ格納
930行目 配列からファイル名を取り出して、その末尾が「mp3」で終わっていたら
934行目 <audio>タグで囲んでボタンを表示する
やっぱLinux最高すぎる。