WEBブラウザでmp3の音楽ファイルを再生しているのですがiPhone(iOS15.4.1から)のブラウザだけ不具合が起きます、PCやAndroidのブラウザでは大丈夫です。createObjectURLで作ったBlobのURLをAudioのsrcへセットして再生するのですが最後の3秒くらいのところでブツっと切れてしまいます。終了後に次の曲を再生としたいのですが次の曲へ行けません。
iPhoneはよくMIMEタイプで問題になるのですが今回は何を指定してもうまくいきませんでした。
- audio/mpeg、audio/mp3 … 最後3秒くらいのところでブツっと切れる
- audio/wave … 再生できない曲が多い(当たり前ですが)
blobをBASE64に変換して直接音楽データをsrcへ[data:audio/mpeg;base64,xxxxxxx]というように埋め込むとちゃんと再生されます。但しこの方法だとiPhoneが待機モードの時に処理がストップしてしまう別の問題があり解決に至っていません。
iPhoneのblobメモリ処置がおかしいような感じを受けるのですが解決策もしくは何か情報をお持ちでしたら教えていただけないでしょうか。
html
1 <audio id="audio" controls style="width:100%;" ></audio> 2 <form id="form"></form> 3 <script> 4 xmlhttp = new XMLHttpRequest(); 5 6 // フォームデータを取得 7 var formdata = new FormData(document.getElementById("form")); 8 xmlhttp.open("POST","m.php"); 9 xmlhttp.responseType = "blob"; 10 xmlhttp.onload = function() { 11 let blob = new Blob([xmlhttp.response],{type:"audio/mpeg"}); 12 //blob参照URL取得 13 let url = URL.createObjectURL(blob); 14 document.getElementById("audio").src = url; 15 }; 16 xmlhttp.send(formdata); 17 </script>
php(m.php)
1<?php 2$fp = fopen('Nocturne.mp3','r'); 3//音楽ファイル読み込み 4$data = fread($fp,filesize('Nocturne.mp3')); 5fclose($fp); 6//ヘッダ情報付与 7header('Content-Type:audio/mpeg'); 8//音楽データ出力 9echo $data; 10?>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/01 00:15 編集