画像と音声を対応させてランダムに再生するには

質問

ホームページやブログで

アクセス時にランダムにＴＯＰ画像を切り替えたり、
ランダムに音声ファイルを自動再生したりすることはjavascriptで簡単に実現可能ですが、

ＴＯＰ画像と再生させる音声ファイルを対応させることは可能でしょうか？
たとえば、ランダムに画像が切り替わる際、
桜の画像が表示されるときは、「これは桜です」と再生させる。
杉の画像が表示されるときは、「これは杉です」と再生させたい。

どの画像が表示されるかはランダムとしても、
桜の画像が表示されているのに「これは杉です」と再生されてしまったら、
つじつまが合わなくなる。

上記のことはjavascriptで可能でしょうか？　どのくらい複雑になりそうでしょうか？
可能な場合は、できればスクリプトを教えて頂きたいです。

回答No.5

Proof4 · ベストアンサー

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

No.3の修正を十分注意して再度ご確認ください。全く同じではありません。
下記に該当部分の比較を記述します。
修正前：background-image:url(' + data[rand].img + '); }</style>';
修正後：background-image:url("' + data[rand].img + '"); }</style>';
ダブルクオーテーションが追加されています。

もうすでにご存知のこととは思いますが、ブラウザの開発者ツールを利用することでウェブサイトをデバッグすることができます。こちらに質問する前にまずはご自身でデバッグするのが筋ではないでしょうか。

お礼

お示しのコードに間違いはありませんでした。
ローカルでの件に関して、私の画像に問題があり、画像を変えたところＩＥブラウザでも表示されました。

一応説明させて頂くと、もともと表示はされていたのですが、
画像が白地で中央に「SUGI」などと文字が記されたものあったため、
ブラウザが変わった際に画像の表示範囲も変更されてしまい無地の部分のみが表示され、
あたかも、表示されていないように見えていただけでした。
私の勘違いであり、ＣＳＳでbackground- imageの大きさを適切に指定していなかったことが原因でした。
貴方のプログラムは最初から完璧でした。

私には沢山の勘違いや、知らない点が多々ありました。
けれども門外漢でも私なりに調べて質問したこと、
質問後も絶えず思考錯誤を怠らなかったこと、
頂いた御回答の一つ一つに深く感謝し真剣に精査していたことははっきりとお断りしておきます。
他意はありませんので、悪く受け取らないで頂きたい。
決して怠惰に人任せにしていたわけではございません。

しかしながら、結果としてProof4様に５回もの御回答をしていただく羽目になったこと、
御不快な思いをさせてしまったことに関して誠に遺憾であり、
この度の失礼をどうかお許し下さい。
私の至らぬ点を誠に申し訳御座いません。

これほど親身に、忍耐強く御回答いただいたこと、
そして何より、この大変優れたプログラムを授けて頂いたことに、
心から感謝いたします。貴方様は素晴らしい能力をお持ちです。

願わくば、またいつか当方の質問を御見かけになった際、御回答いただけますと幸いです。

補足

ダブルクオーテーションを追加し忘れたことは、補足の際の入力ミスでした。
私がNo4の補足で言いたかったことは、
「貴方の言うとおりに修正したけれどもＩＥで画像が表示されません」という意味です。
大変失礼しました。
つまり、いずれにせよ表示されません。

>>もうすでにご存知のこととは思いますが、
>>ブラウザの開発者ツールを利用することでウェブサイトをデバッグすることができます。
>>こちらに質問する前にまずはご自身でデバッグするのが筋ではないでしょうか。

？
どうしてそうお考えになったのかは存じませんが、
デバックの方法など知りませんし、それが質問の際の筋だという考えに同意できません。
私なりに調べたうえで注意深く質問しています。
一応、アドビの検出ソフトを使って明らかな記述ミスがないように注意したうえで質問しているのです。

私はJavascriptに関して素人です、と既に明記しています。
以下のサイトで私なりに調べてみましたが、どう直せばよいのか分かりようがないでしょう。
https://msdn.microsoft.com/library/dn255007(v=vs.85).aspx

回答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>
を追加したにも関わらずです。

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

回答No.3

Proof4

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

HPフォルダ以下の階層が下記のようになっていれば問題なく読み込まれるはずです。ご確認ください。
HP
├index.html
├image
│├2017ca.png
│└2017b6.png
└voice
　├2017e8.mp3
　└201799.mp3

-追記-
背景画像を表示する部分ですが、No.2の回答で提示したコードではブラウザによって表示されないことがあります。下記のように書き換えていただきますと正常に表示されます。
document.head.innerHTML += '<style type="text/css">#header { background-image:url("' + data[rand].img + '"); }</style>';

お礼

ANo.5に正式なお礼コメントをいたしましたので、よろしくお願いいたします。
この度は完璧なプログラムをどうもありがとうございます。

補足

ブログなどでは、画像の切り替わりのみ動作確認しました、音声はなぜか再生されませんhttp://5k7aek5gd.blog.fc2.com/

オフラインのローカルエリア上では、画像表示、音声再生いずれも動作しないのです。
ローカルエリア上における階層は、次の通りとなっております。
HP
├index.html
├image
│├sakura.png
│└sugi.png
└voice
　├sakura.mp3
　└sugi.mp3

コードは下記の通りです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<head>

<title>Test</title>
<script language="JavaScript">
/* アクセス時に背景画像と音声をセットにしてランダムに自動出力 */
var data = {
　/* 画像と音声でセットにしたいものを好きなだけ記述 */
　0: {img: 'image/sakura.png', snd: 'voice/sakura.mp3'},
　1: {img: 'image/sugi.png', snd: 'voice/sugi.mp3'}
};

document.addEventListener("DOMContentLoaded", function(){
　var rand = Math.floor( Math.random() * Object.keys(data).length );

　/* 背景画像の出力 */
document.head.innerHTML += '<style type="text/css">#header { background-image:url("' + data[rand].img + '"); }</style>';
　/* 音声の出力 */
　document.getElementById("audiowrap").innerHTML = '<audio autoplay>' +
　'<source src="' + data[rand].snd + '" type="audio/mp3">' +
　'</audio>';
});
</script>

</head>

<body>
<p>Hello world</p>
</body>
</html>

上記のコードで、Proof4様のコンピューター内では動作いたしますでしょうか？
厚かましく何度も恐縮ですが、お時間ある時にでも、御確認頂くことはできませんでしょうか？

ちなみに、Proof4様に以前いただいた下記のコード（画像をアクセス時にランダムに切り替えるプログラム）もローカルエリア上で動作しないのです、何故なのでしょう？（ブログでは動作いたします）

<script language="JavaScript">
var wall = new Array();

wall[0] = "images/dezimon01-01.png";
wall[1] = "images/atari.jpg";
var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">#header { background-image:url(' , wall[rnd] , '); }</style>');

</script>

回答No.2

Proof4

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

今回の場合では全部書き直しとはなりません。画像を出力する部分と音声を出力する部分を統合することで実現できます。下記にソースコードを示します。
----
<script language="JavaScript">
/* アクセス時に背景画像と音声をセットにしてランダムに自動出力 */
var data = {
　/* 画像と音声でセットにしたいものを好きなだけ記述 */
　0: {img: 'http://onix.com/2017ca.png', snd: 'http://onix.com/2017e8.mp3'},
　1: {img: 'http://onix.com/2017b6.png', snd: 'http://onix.com/201799.mp3'}
};

document.addEventListener("DOMContentLoaded", function(){
　var rand = Math.floor( Math.random() * Object.keys(data).length );

　/* 背景画像の出力 */
　document.head.innerHTML += '<style type="text/css">#header { background-image:url(' + data[rand].img + '); }</style>';
　/* 音声の出力 */
　document.getElementById("audiowrap").innerHTML = '<audio autoplay>' +
　'<source src="' + data[rand].snd + '" type="audio/mp3">' +
　'</audio>';
});
</script>
----

変数名や出力の部分など若干の変更がありますが、現在のプログラムと同等に動くと思います。

お礼

ANo.5に正式なお礼コメントをいたしましたので、よろしくお願いいたします。
この度は完璧なプログラムをどうもありがとうございます。

補足

今回も、美しいコードをどうもありがとうございます。
こんなに素晴らしいコードをかいて頂けるなら有料でもよいです。
ココナラというサイトがありまして、今度ぜひ有料でも御依頼したいです。

まず、頂いたコードは完璧だと思います。
ただどうしてもお尋ねしたいことがあります。
こちらのNo.2でいただいた、美しいプログラムは、前回のプログラム同様、
ブログでは機能するのですが、
自分のコンピューターにある、ローカルフォルダ内のＨＴＭＬファイルのダブルクリックでのブラウザ表示の際に、いずれも上手く機能しません。この場合どうすればよいでしょうか。
ＦＣ２ブログですと機能するので、いただいたプログラムそのものは「完璧」のはずなのです。
私のファイルのパス参照に問題があり、
ファイルをうまく参照できていない、ということが強く疑われます。
ＦＣ２では、var srcのパス参照に関して、'http://blog.fc2.com/0/onix/2017.mp3',などと絶対パスを表示すればよかったのです。それで問題なく、いただいたプログラムが動いていたのです。
しかしＰＣの、ローカルフォルダのＨＴＭＬファイルを起動する際は、パソコン内のMP3や画像ファイルの参照がうまく読みこめないようです。

仮に、いま、ＨＰという名のローカルフォルダがあるとします。
その直下の階層に、「index.html」、「image」ディレクトリ、「voice」ディレクトリがあります。
このとき、今回頂いたプログラムのvar data部分を次の様に記述するとします。

var data = {
　/* 画像と音声でセットにしたいものを好きなだけ記述 */
　0: {img: 'image/2017ca.png', snd: 'voice/2017e8.mp3'},
　1: {img: 'voice/2017b6.png', snd: 'voice/201799.mp3'}
};

上記のパス参照ですと、うまく読みこまれないのだと思います。
上記の一体何が問題なのでしょうか？

尚、
ＤＯＣＴＹＰＥ宣言は<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
文字コードにも<meta http-equiv="content-script-type" content="text/javascript">
を指定しております

回答No.1

Proof4

画像ファイルのURLと音声ファイルのURLを紐づけして記録しておけばなんら難しいことはないです。
下記のような、画像のURLと音声のURLをセットにしたオブジェクトを定義しておきます。

var radomdata = {
　1: {
　　img: '画像1のURL',
　　snd: '音声1のURL'
　},
　2: {
　　img: '画像2のURL',
　　snd: '音声2のURL'
　}
};

あとはこのオブジェクトrandomdataの要素数を取得して、その範囲で整数の乱数を発生させれば良いです。

生成した乱数値(var randomkey)に対して
画像のURL = randomdata[randomkey].img;
音声のURL = randomdata[randomkey].snd;
とすればそれぞれのファイルのURLを取り出すことができます。

お礼

ANo.5に正式なお礼コメントをいたしましたので、よろしくお願いいたします。
この度は完璧なプログラムをどうもありがとうございます。

補足

Proof4様、約４カ月前は下記質問に関して大変お世話になりました。
https://oshiete1.nifty.com/qa9349408.html

>>あとはこのオブジェクトrandomdataの要素数を取得して、その範囲で整数の乱数を発生させれば良いです。
門外漢なので、具体的にどうすればよいのか分からないのです。
私はＨＴＭＬはできますが、javascriptが全く出来ません。

>>生成した乱数値(var randomkey)に対して
>>画像のURL = randomdata[randomkey].img;
>>音声のURL = randomdata[randomkey].snd;
>>とすればそれぞれのファイルのURLを取り出すことができます。

ここでは仮に、以下のデータをアルファベットの一致する他方のデータと対応させたいとします。

画像Ａ　http://onix.com/2017ca.png
画像Ｂ　http://onix.com/2017b6.png
音声Ａ　http://onix.com/2017e8.mp3
音声Ｂ　http://onix.com/201799.mp3

この場合、javascript内はどのようにすればよいでしょうか？
もしお時間のある時がございましたら、教えて頂けますと幸いです。

P,S
４か月前のProof4様の御回答を忠実に実行し、
以下の様に設定しておりました。

<!--top画像をランダムに変更するJavaScript-->
<script language="JavaScript"><!--
var wall = new Array();
/* 使用する背景画像を好きなだけ記述 */
wall[0] = "～.png";
wall[1] = "～.png";
wall[2] = "～.png";
wall[3] = "～.png";

var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">#header { background-image:url(' , wall[rnd] , '); }</style>');
// --></script>

/*アクセス時に ランダムに音声を自動出力 するJavaScript*/
<script language="JavaScript">

var src = [
　'http://～.mp3',
　'http://～.mp3',
　'http://～.mp3',
　'http://～.mp3',
];

document.addEventListener("DOMContentLoaded", function(){
　var rand = Math.floor( Math.random() * src.length );

　document.getElementById("audiowrap").innerHTML = '<audio autoplay>' +
　'<source src="' + src[rand] + '" type="audio/mp3">' +
　'</audio>';
});

</script>

御蔭様でランダムに音声は自動再生され、ＴＯＰ画像も毎回変更されます。
このプログラムは大切に愛用してきました。
これは今回のケースだと全部かきなおしでしょうか？