formを送り続けながらaudioタグ等でBGMを流せるようにしたい。

Question

formを送り続けながら、BGMが流れるように設定したいのですが、formを送ると
audioタグで設定した音楽が送るごとに最初の位置に戻って再生されてしまいます。

audioタグで作成したBGMをJSから流すように設定いたしましたが、改善されませんでした。

<form action="test.php" method="post">
<input type="submit" value="test" name="test" >
</form>

<h1>
<?php

//$randはform送信後の送信確認用に定義しております。
function test(){
 $rand = rand(100,10000);
 return $rand;
}

if(isset($_POST["test"])){
 echo test();
} else {
 echo "テストを開始する";
}

?>
</h1>

//JSから再生予定のためmutedにしております。
<audio id="audio" muted>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.wav" type="audio/wav">
</audio>


<script type="text/javascript">
var audio = new Audio("sample.mp3");

function play() {
    audio.loop = true;
    audio.volume = 0.1;
    audio.play();
}

play();

</script>

結果として、ページに移動した直後からJSで設定した音量で音楽は再生されますが、formのsubmitボタンを押すたびに、音楽が初めの位置に戻ってしまいます。

form送信による処理にJS等全てが引っ張られてしまって、同じタイミングで読み込まれてしまっているためなのでしょうか。

できればaudioタグの箇所は独立させて、formの処理とは無関係に動いて欲しいのですが改善方法がわかりませんでした。

十分な説明ができておらず恐縮ですが、よろしくお願い致します。

Comments

[m.ts10806]

>$rand = rand(100,10000);

これはなんのためのものでしょうか。

[F.Drake]

お答えありがとうございます。

$randはあくまで、テスト用に変化のある表示がform送信後に確認できればと思って記述いたしました。

Answer 1

基本的な部分を勘違いされています。

<form action="test.php" method="post">
  <input type="submit" value="test" name="test" >
</form>

この書き方によるsubmitボタンをクリックしたときの挙動を簡単にお伝えすると、

$_POST['test'] に test という文字列を突っ込んでそれを持たせた状態で
formタグのaction属性に設定されているURLを開く、という動きになります。
（なのでsubmitと音楽の再生はそれぞれ独立した動きです）

その為、submitを押す度に音楽が最初から再生されるというわけではなく、
submitを押したことで test.php がリロードされる（ページが開き直される）ので
音楽が最初から再生されてしまいます。

Javascriptで再生機構を実装していますが、
Javascriptはページがリロードされるともう一度実行し直すので当然の動きです。

どのような完成系を想定しているかは分かりませんが、
formからの送信にこだわるのなら、Ajaxによる非同期処理によってページを遷移せずに

Subimt → 別のPHPファイルで処理（この際ページ遷移をしない） → 現在のページに結果を反映

が必要になろうかと思います。

Comments

[F.Drake]

とてもわかり易いご説明ありがとうございます。

audioタグをautoplayとして、ajaxを利用して独立させ、formの入っているファイルで読み込ませることでもいけそうでしょうか。

ajax並びにJavascriptの理解が追いついておりませんので、ajaxを調べてみたいと思います。
アドバイス助かりました。

[F.Drake]

ご説明わかりやすかったです。どうやら、Ajaxにての理由で形式にGETやPOSTとあるので、inputを利用して送信を行う箇所へのAjaxの適用はできそうですが、audioタグの部分などをAjax利用にて非同期で再生させる事ができるかなどは不明なので、少し調べてみます。