音楽をランダム再生するには

質問

FC2ブログで、アクセスされるたびにランダムでBGMが自動再生されるようにしたいのです。

自動再生まではaudioタグで容易に達成できたのですが、
ランダム再生するにはjavascriptをどう記述すればよいでしょうか。
スクリプトを教えていただけないでしょうか。

javascriptを使って、画像をランダムに切り替えすることは出来たので、
音楽もランダムに流せるはずだと思うのです。

ただし、<embed＞タグは使用せず、audio要素を採用するものとします。
理由は、アクセスしたとき、利用者のブラウザの設定によって、「このページは、microsoftからのアドオン「windows media player」を実行しようとしています。許可しますか」という確認画面が表示されるためです。この場合、閲覧者の側で許可をしないと、自動再生されないので、事実上、自動に再生できていないことになります。

下記のaudioタグを使用するものとします（再生ボタン等を表示しません）
<audio >
<source src="http://～.mp3" autoplay>
</audio>

ちなみに、上記のことは技術的には難しいのでしょうか？
有料で誰かに依頼するレベルでしょうか？

回答No.1

Proof4 · ベストアンサー

--Javascript--
// 再生するファイルのURLを配列に格納
var src = [
　'path1.mp3',
　'path2.mp3',
　'path3.mp3',
　'path4.mp3'
];

// DOM要素の読み込みが終了してから実行
document.addEventListener("DOMContentLoaded", function(){
　var rand = Math.floor( Math.random() * src.length ); // 0以上ファイル数未満の整数値の乱数を生成

　// id="audiowrap"の要素にaudio要素を書き出す
　document.getElementById("audiowrap").innerHTML = '<audio autoplay>' +
　'<source src="' + src[rand] + '" type="audio/mp3">' +
　'</audio>';
});

--HTML--
<div id="audiowrap"></div>

はじめ、sourceのsrcを書き換えればできるのではないかと思いましたが、再生するファイルの読み込みがなされなかったため、div要素の中にaudioを書き出すという方法で実現しました。

お礼

エレガントで、創造的で、革新的で、論理的で、生産的で、数学的で、美術的で、音楽的で、詩的なコード（芸術作品、無形文化財）、
感服いたしました。

当方は、javascriptの門外漢ではございますが、御蔭様で、ブログアクセスのたびに音声ファイルがランダムに自動再生されるという、意図する挙動を実現できました。

当初は上手くいかなかったとのこと。それでも、上手くいくように修正されてまで、
作品を仕上げていただき、感謝の言葉もございません。
div要素の中にaudioを書き出す、という妙技、
それが美しい問題解決法であることくらいは、私にも分かります。
鮮やかな手口、お見事であります。

お金をお支払いしたいくらいですが、最高位のプログラマーの方に対し、それでは逆に失礼にあたりますね。
Proof4様は、芸術家であり、科学者であり、技術者であり、文学者であります。

貴方様は、単に私を助けただけではありません。
私どもの拙いブログは、公益性を重視し、困っている人に情報提供をするものなのです。
よって、其のブログを技術面で支援したということは、貴方様は間接的に、それらの人々をも助けたことになります。

コンピュータープログラムは素晴らしいと、つくづく実感します。
この行き詰った時代に、限界を切り開き、社会を明るくより良いものにしていくに当たって、
コンピュータープログラム（を創造するプログラマー）が極めて重要な役割を果たすことは間違いない、と感じました。

貴方様の芸術作品は、決して無為には致しません。
遊び心や、公益の精神を、プログラムは実現してくれる。
コンピュータープログラムは素晴らしい。そしてProof4様も素晴らしい

補足

ご提示された「芸術作品」において、FC２ブログでの意図する挙動を確認致しました。

これにより、
ブログアクセスのたびに、ランダムで音声ファイルが自動再生されるようになりました。

一点、ご確認したいのですが、
head要素内において、貴方様の作品を
<script language="JavaScript"></script>
で括り、ご指示に従って
body要素のheader内で<div id="audiowrap"></div>を配置しただけです。

上記の方法で、何か間違っていましたら、お忙しいところ申し訳ありませんが、コメント頂けますと幸いです。
現在のところ正しく動作するのですが、もし、何か私どもがどこか解釈を間違っていて、他の方のブラウザでは見れない、といったことがないか不安だったのです。