min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

fedora 30 Apacheサイトでmp3ファイルをループ再生する(HTML5のaudioタグでloop)

fedoraサーバ上に例えばこういうmp3ファイルがあって

f:id:min117:20191014001320p:plain

Apacheで自宅内公開されているとする。

 

macOSSafariから見るとまあ、こうなる。

f:id:min117:20191014001255p:plain

 

クリックすると再生する。これはブラウザ(Safari)の標準動作。

f:id:min117:20191014001643p:plain

しかしこれだとループ再生できない。クリックしたらループで再生してほしい。気に入った曲はとにかく延々と流し続けて欲しい。 

 

調べた。HTML5だとループ再生できるみたい。属性に「loop」がある。

f:id:min117:20191014001859p:plain

honttoni.blog74.fc2.com

 

早速コード書いてみる。

 

$ vim doMP3test.html

f:id:min117:20191014001958p:plain

f:id:min117:20191014002248p:plain

 

動作テスト。ブラウザから http://サーバ名/doMP3test.html でアクセス。

f:id:min117:20191014002509p:plain

読み込みが開始(preload)し、自動で曲の再生がスタート(autoplay)する。

 

曲が終わりになると

f:id:min117:20191014002653p:plain

自動で先頭に戻ってループ再生する(loop)。

f:id:min117:20191014002711p:plain

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>

 

 

www.youtube.com

 

さらに応用すると例えばこんなことができる。

 

サーバに公開しているフォルダにあるmp3ファイル全てについて、ループ再生するための再生ボタンを作るphp

f:id:min117:20191014011217p:plain

mp3でgrepして表示されたmp3ファイルをループ再生できる。iPhoneだろうがAndroidだろうが関係ない。HTML5に対応したブラウザさえあればループ再生してBGM鳴らせる。

 

ソースはこれ(一部抜粋)

$ vim doLSglob.php

f:id:min117:20191014010311p:plain

919行目 phpのglob関数でフォルダ内にあるmp3ファイルを読み込んで配列へ格納

930行目 配列からファイル名を取り出して、その末尾が「mp3」で終わっていたら

934行目 <audio>タグで囲んでボタンを表示する

 

やっぱLinux最高すぎる。