画像と音声をランダムに再生する方法

質問

• ホームページやブログでアクセス時にランダムにＴＯＰ画像を切り替え、音声ファイルを自動再生する方法について説明します。
• JavaScriptを使用することで、ＴＯＰ画像と再生する音声ファイルを対応させることが可能です。
• 画像が切り替わる際に、表示される画像に応じた音声を再生させることで、よりリアルな体験を提供することができます。

回答No.4

Proof4

No.3の補足に対して回答します。

プログラムの動作の仕組みについて、簡単にお伝えしておくと
画像の表示は、id="header"の要素の背景画像を変更する
音声の再生は、id="audiowrap"の要素内にaudio要素を書き出す
というようになっています。

よって、id="header"やid="audiowrap"の要素がbody要素内に存在しないと動作しません。
現状、ブログ上にはid="header"の要素が存在しているため画像の切り替わりが動作しますが、ブログ上・ローカル両方においてid="audiowrap"の要素は存在しないため、音声は再生されません。

body要素内に
<div id="header"></div>
<div id="audiowrap"></div>
を追加することでブログ上・ローカルに関わらず正常に動作します。

音声の再生に関して、空のaudiowrap要素を記述しないで実現することも可能ですが、スクリプトに多少の変更が必要です。

参考URL：

https://oshiete1.nifty.com/qa9349408.html

お礼

失礼しました、No.4の私の補足に関して、追記いたします。

>>一方、インターネット上のブログにおいては、
>>画像はブラウザに関わらず表示されてアクセスごとに切り替わりますが、
>>やはり、どうしてか音声が再生されないのです。パスのＵＲＬも注意深く確認したのですが、
>>パスに間違いがあるわけでもなく、本当に謎です。
>>ローカルエリア上のＨＴＭＬファイルでは、なんら問題なく再生されるのにです。

どうやらmp3のコーデックが壊れていたことが原因だったようです。
https://increment-log.com/audio-mp3-ie-error/
上記を参考にし、コーデックをかきかえたところ、ブログ上で意図する挙動を確認できました。
本当に、どうもありがとうございます。
以下のブログで、桜の画像なら「桜です」、杉なら「杉です」、もみじなら「もみじです」と再生されました。
なんという、美しいプログラムでしょうか。
http://5k7aek5gd.blog.fc2.com/

ただ、依然として、以下の疑問が残ります。厚かましくて恐縮ですが、お時間あるときにでも、御確認をお願いできませんでしょうか？
ーーーーーーーーーーーーーーーーー
Chromeでは意図する挙動を確認できました。本当に感謝の言葉もありません。
ただ、InternetExplorerで表示しようとしますと、画像が何も表示されないのです。
つまりブラウザによって、結果が変わってしまうのです
（インターネットオプションのセキュリティ項目で「マイコンピュータのファイルでのアクティブコンテンツの実行を許可する」をONにしているにもかかわらず。インターネットオプションのjavascriptの設定も、一通り、有効にしていると思うのですが、一体これは、何が原因なのでしょうか）。
Proof4様は、No3の御回答で、「背景画像を表示する部分はブラウザによって表示されない事があるため、修正が必要」と仰っておりました。
しかし、ご提示いただいた修正コードというのが、
document.head.innerHTML += '<style type="text/css">#header { background-image:url(' + data[rand].img + '); }</style>';
であり、これは、No1の背景画像を表示する部分のコードと全く同じになっております。この部分、今一度、ご確認いただくことはできませんでしょうか？
ーーーーーーーーーーーーーーーーーーーー

補足

何度も、親身にどうもありがとうございます。

そうか、header要素やaudiowrap要素が存在しなければ、
かきだしようがない、ということなのですか。
思いだしました、
そうか、だからブログとローカル上との間で、動作するものとしないものがあったのか。
いただいたプログラムに問題があったのではなく、私の扱い方が問題だったということが、よく分かりました。
何度も辛抱強く御回答をいただきありがとうございます。
body要素内に欠けていたid="audiowrap"を追加することで、ローカル上の特定のブラウザ表示での意図する挙動を確認いたしました。つまり、桜の画像が表示されれば「桜です」、杉の画像なら「杉です」という挙動が実現できました。
いただいたプログラムは、ずっと大事にします。どうもありがとうございます。

ただ、まだ疑問は残ります。

まず、ローカル上での話なのですが、
Chromeでは意図する挙動を確認できました。本当に感謝の言葉もありません。
ただ、InternetExplorerで表示しようとしますと、画像が何も表示されないのです。
つまりブラウザによって、結果が変わってしまうのです
（インターネットオプションのセキュリティ項目で「マイコンピュータのファイルでのアクティブコンテンツの実行を許可する」をONにしているにもかかわらず。インターネットオプションのjavascriptの設定も、一通り、有効にしていると思うのですが、一体これは、何が原因なのでしょうか）。
Proof4様は、No3の御回答で、「背景画像を表示する部分はブラウザによって表示されない事があるため、修正が必要」と仰っておりました。
しかし、ご提示いただいた修正コードというのが、
document.head.innerHTML += '<style type="text/css">#header { background-image:url(' + data[rand].img + '); }</style>';
であり、これは、No1の背景画像を表示する部分のコードと全く同じになっております。この部分、今一度、ご確認いただくことはできませんでしょうか？

一方、インターネット上のブログにおいては、
画像はブラウザに関わらず表示されてアクセスごとに切り替わりますが、
やはり、どうしてか音声が再生されないのです。パスのＵＲＬも注意深く確認したのですが、パスに間違いがあるわけでもなく、本当に謎です。ローカルエリア上のＨＴＭＬファイルでは、なんら問題なく再生されるのにです。

ブログ上・ローカルそれぞれに、
<div id="header"></div>
<div id="audiowrap"></div>
を追加したにも関わらずです。

ブログに関しては、運営サイト側のシステムの予期せぬ干渉なども考えられますので、それはよいのですが、
ローカルエリア上でＩＥブラウザにおいて画像が表示されないのはどういうことなのか、頭を悩ませております。