ajaxを使って動的にJavaScriptを埋め込みたい

以下のような、HTMLファイルとそこからajaxで呼び出すphpを作りました。

index.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>音声ファイルのテスト</title>
6</head>
7<body>
8  <button id="btn">押してください</button>
9  <div id="sound">ここに音声再生部分が入る</div>
10<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
11<script>
12(function(){
13  'use strict';
14
15  var btn = document.getElementById("btn");
16  var sound = document.getElementById("sound");
17  btn.addEventListener("click", function(){
18      var obj ={};
19      $.get('sound.php', obj, function(data) {
20          sound.innerHTML = data;
21      });
22  });
23})();
24</script>
25</body>
26</html>

sound.php

PHP
1<?php
2
3print <<< EOM
4<audio id="audio" src="voice.mp3" preload="none"></audio>
5<a id="play"><img src="sound.png"></a>
6
7<script>
8(function(){
9  var playBtn = document.getElementById("play");
10  var audio = document.getElementById("audio");
11  playBtn.addEventListener('click', function(){
12    audio.play();
13  });
14})();
15</script>
16EOM;

index.htmlを表示すると、ボタンが表示される。
ボタンを押すと、サーバ側のsound.phpが動いて、audioタグと音声再生用のJavaScriptの入ったソースが挿入される

という動作をします。ここでsound.phpによって挿入された画像(sound.png)をクリックすると、voice.mp3が再生されてほしいのですが、再生されません。

ajaxを使わずに、sound.phpがはくコードをそのままHTML内に挿入すれば、問題なく音声が出るので、ajaxがらみでうまく動かないのだと思うのですが、どのようにすればいいでしょうか?

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

検証していないので、想像での回答となるけど

js
1sound.innerHTML = data;

の時点ではタグが挿入されただけなので音が鳴らないのではと思う。
sound.phpに書かれている<audio>タグにautoplay属性を追加すればボタンクリックしたら再生されるのでは？

html
1<audio id="audio" src="voice.mp3" autoplay></audio>

だけど、ここ最近のブラウザーの自動再生ポリシーに引っかかって再生できないかもしれない。

投稿2018/07/21 03:59

編集2018/07/21 04:05

turbgraphics200

総合スコア4267

HajimeHamada

2018/07/21 04:20

ご回答ありがとうございます。ご指摘のようにautoplayを指定すると、最初のindex.htmlのボタンをクリックしただけで、音が流れてしまいます。これは所望の動作とは違っていて、 1. 最初のボタンをクリックすると音声再生ボタン(sound.png)が表示 2. そのボタンを押すと音声再生という流れがやりたいことです。説明不足だったかもしれません。申し訳ないです。

turbgraphics200

2018/07/21 04:49

すみません。私も勘違いしてました。<audio>にidを割り振っているので、 <a>要素にonclick属性を追加してみては？ <a id="play" onclick="document.getElementById('audio').play();return false"><img src="sound.png"></a>

HajimeHamada

2018/07/21 05:32

動作することを確認しました。なるほど。onclickで指定すればよかったんですね。ありがとうございました。

行動規範の内容に同意します