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

質問

• ホームページやブログでアクセス時にランダムにＴＯＰ画像を切り替え、音声ファイルを自動再生する方法について説明します。
• 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>

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