- ベストアンサー
画像と音声をランダムに再生する方法
- ホームページやブログでアクセス時にランダムにTOP画像を切り替え、音声ファイルを自動再生する方法について説明します。
- JavaScriptを使用することで、TOP画像と再生する音声ファイルを対応させることが可能です。
- 画像が切り替わる際に、表示される画像に応じた音声を再生させることで、よりリアルな体験を提供することができます。
- みんなの回答 (5)
- 専門家の回答
関連するQ&A
- 画像のランダム表示について
スクリプトに関する質問です。 JavaScriptの「var imglist = new Array」を使って、 閲覧するたびに画像がランダムに変わるようにしたいと思います。 その場合、ランダムに変わる画像を多くしてしまうと、 いったん全部読み込むなどの理由で、ロード時間が長くなるのでしょうか? それともロードの度にひとつだけのファイルを選ぶので変わらないのでしょうか? こちらはたくさんの画像をランダムに表示したいと思っているのですが、 あまり重くなるようなら画像をしぼろうかと考えています。 どなたかお解かりいただければ、ご回答ください。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 音楽をランダム再生するには
FC2ブログで、アクセスされるたびにランダムでBGMが自動再生されるようにしたいのです。 自動再生まではaudioタグで容易に達成できたのですが、 ランダム再生するにはjavascriptをどう記述すればよいでしょうか。 スクリプトを教えていただけないでしょうか。 javascriptを使って、画像をランダムに切り替えすることは出来たので、 音楽もランダムに流せるはずだと思うのです。 ただし、<embed>タグは使用せず、audio要素を採用するものとします。 理由は、アクセスしたとき、利用者のブラウザの設定によって、「このページは、microsoftからのアドオン「windows media player」を実行しようとしています。許可しますか」という確認画面が表示されるためです。この場合、閲覧者の側で許可をしないと、自動再生されないので、事実上、自動に再生できていないことになります。 下記のaudioタグを使用するものとします(再生ボタン等を表示しません) <audio > <source src="http://~.mp3" autoplay> </audio> ちなみに、上記のことは技術的には難しいのでしょうか? 有料で誰かに依頼するレベルでしょうか?
- ベストアンサー
- JavaScript
- スライド写真で2、3枚目をランダムで表示させるには
bgSwitcherを使用してフェードインアウトするスライドショーを作りました。 [A固定]→[Bランダム]→[Bランダム]→[C固定] 1枚目、4枚目は指定画像に差替え表示できていますが、 2枚目、3枚目が同じ画像を表示してしまい、繰り返し再生しても再度ランダムに選んでくれず、初めに読み込んだ画像のままでした。 【実現したいこと】 ●imgBをランダム読み込みし、2枚目、3枚目で同じ画像が選ばれないようにしたい ●2巡目以降も、再生のたびにランダム処理を実施する どなたか、上記のものが実現できるように出来ないものでしょうか。 どうぞよろしくお願いいたします。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.bgSwitcher.js" type="text/javascript"></script> <script language="javascript"> <!-- // JavaScript Document var imgA = ["images-top/A.jpg"], imgC = ["images-top/C.jpg"]; imgB = new Array(); imgB[0] = "images-top/B1.jpg"; imgB[1] = "images-top/B2.jpg"; imgB[2] = "images-top/B3.jpg"; imgB[3] = "images-top/B4.jpg"; imgB[4] = "images-top/B5.jpg"; n = Math.floor(Math.random()*imgB.length); jQuery(function($) { $('#bgSwitch-fadeOut').bgSwitcher({ images: [imgA, imgB[n], imgB[n], imgC], interval: 1000, fadeSpeed: 1000, }, true); }) --> </script> <style type="text/css"> .bg { width: 160px; height: 160px; padding: 20px; line-height: 1.6; } </style> </head> <body> <div> <div id="bgSwitch-fadeOut" class="bg"> <p>テキスト</p> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- 画像をランダムに
JavaScript初心者です。回答していただければさいわいです。 初心者といってもタグサイトからコピペしていじくるだけの者ですが。 画像をランダムに表示したいと思いJavaScriptを使用したのですが うまく表示させることができません。 画像自体表示していないことになってしまいます。 画像を表示させたい部分に <SCRIPT language="JavaScript"> <!-- // img = new Array(); img[0] = "t/1.jpg"; img[1] = "t/2.jpg"; img[2] = "t/3.jpg"; img[3] = "t/4.jpg"; img[4] = "t/5.jpg"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> とタグをうっているのですが、なにか足りないところがあるのでしょうか?
- ベストアンサー
- JavaScript
- javascriptを使って画像のランダム表示とロールオーバーをセット
javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1~5まで、ロールオーバー用の画像がa~eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら1に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。
- 締切済み
- JavaScript
- 画像からランダムリンク
Javascriptでランダムリンクをする場合、 <form> <input type=button onClick="jump()" value="ランダム"> </form> <script> url = new Array(); url[0] = "00.html"; url[1] = "01.html"; url[2] = "02.html"; function jump() { p = Math.round(Math.random() * (url.length - 1)); parent.top.document.location = url[p]; } </script> という記述を使うのは知っているんですが、 「ランダムリンク」というボタンではなく、 画像をクリックしてランダムリンクさせることは可能でしょうか? Javascriptでは無理な場合、 画像からランダムリンクを張る方法はありますか? CGI等でも構いませんので、お勧めがあれば教えてください。
- ベストアンサー
- JavaScript
- HP上で音声ファイルをランダムで流すには
HP上で画像をクリックしたら、ランダムで音声ファイル(4種類)が流れるようにするには、どうしたらよいでしょうか、教えていただけないでしょうか。 できましたらJavaScriptを使って、IE,firefox,Safari対応が望ましいです。 音声ファイルの形式は現在はaifですが、変換すればよいので、問いません。
- 締切済み
- JavaScript
- 画像リンクをランダムに4つ表示する
このようなタグを使って、画像リンクのランダム表示を作成しました。 ((hard内)) <script type="text/javascript"><!-- // var imglist = [ [ "画像1", "", "リンク先1" ] , [ "画像2", "", "リンク先2" ] ]; function RandomImageLink() { // var selectnum = Math.floor(Math.random() * imglist.length); // var output = '<a href="' + imglist[selectnum][2] + '">' + '<img src="' + imglist[selectnum][0] + '"' + ' alt="' + imglist[selectnum][1] + '"><br>' + imglist[selectnum][1] + '</a>'; // document.write(output); } // --></script> ((body内)) <script type="text/javascript"><!-- RandomImageLink(); // --></script> こうしてランダムに表示できるようになったのですが、私は『ランダムに1つ表示』ではなく、『ランダムに4つ表示』にしたいのです。 …どうすればいいのでしょうか? どなたか回答をお願いします。
- ベストアンサー
- JavaScript
- ブログトップにランダムで画像を表示させる方法
ブログのトップに画像をランダムで表示させたいと思っています。 テンプレートはfc2の共有プラグインのsimple04を使っています。 <script language=”JavaScript”> var images = new Array(); /* 画像URLを表示させたい分だけ書き込むこと */ images[0] = “”; images[1] = “”; images[2] = “”; images[3] = “”; images[4] = “”; images[5] = “”; images[6] = “”; var rnd = Math.floor((Math.random() * 100)) % images.length; document.write(‘<img src=’,images[rnd],’ border=”0″>’); </script> 自分で調べてみてこのタグを使えばいいことはわかったのですが、 HTMLの所に貼るのかCSSのところに貼るのかわかりません。 回答よろしくお願いします。
- 締切済み
- ブログ
- 画像ランダム表示、しかしダブらないように…
トップページの画像をランダム表示させたいです。 1枚だけならどこかでソースが載っていたのでそれをコピーしたらいいだけだと思うので問題はないのですが、3枚をランダム表示させ、なおかつ同じ物が表示しないようにしたいのです。 もちろん、画像保存フォルダは1つです。また、ファイルは順次増やして行きたいです。 1枚目の画像が決定した後、それ以外の画像からランダムに選択。さらに1枚目・2枚目の画像が決定したらそれ以外の画像からランダムに選択。 こんな事が出来ますか? また、どうしたらいいのでしょうか? よろしくお願いします。
- ベストアンサー
- JavaScript
- 家族に酒乱がおり性格を知っている女性が、お酒で記憶を無くす彼と別れ話。
- 別れ話をしてもしつこく引き止められ、酒をやめるからと言われるが、どう対処したらよい?
- 女性はお酒を飲むリスクを知っていたが、お付き合いをしてしまった過ちに責任を感じている。
お礼
お示しのコードに間違いはありませんでした。 ローカルでの件に関して、私の画像に問題があり、画像を変えたところIEブラウザでも表示されました。 一応説明させて頂くと、もともと表示はされていたのですが、 画像が白地で中央に「SUGI」などと文字が記されたものあったため、 ブラウザが変わった際に画像の表示範囲も変更されてしまい無地の部分のみが表示され、 あたかも、表示されていないように見えていただけでした。 私の勘違いであり、CSSでbackground- imageの大きさを適切に指定していなかったことが原因でした。 貴方のプログラムは最初から完璧でした。 私には沢山の勘違いや、知らない点が多々ありました。 けれども門外漢でも私なりに調べて質問したこと、 質問後も絶えず思考錯誤を怠らなかったこと、 頂いた御回答の一つ一つに深く感謝し真剣に精査していたことははっきりとお断りしておきます。 他意はありませんので、悪く受け取らないで頂きたい。 決して怠惰に人任せにしていたわけではございません。 しかしながら、結果としてProof4様に5回もの御回答をしていただく羽目になったこと、 御不快な思いをさせてしまったことに関して誠に遺憾であり、 この度の失礼をどうかお許し下さい。 私の至らぬ点を誠に申し訳御座いません。 これほど親身に、忍耐強く御回答いただいたこと、 そして何より、この大変優れたプログラムを授けて頂いたことに、 心から感謝いたします。貴方様は素晴らしい能力をお持ちです。 願わくば、またいつか当方の質問を御見かけになった際、御回答いただけますと幸いです。
補足
ダブルクオーテーションを追加し忘れたことは、補足の際の入力ミスでした。 私がNo4の補足で言いたかったことは、 「貴方の言うとおりに修正したけれどもIEで画像が表示されません」という意味です。 大変失礼しました。 つまり、いずれにせよ表示されません。 >>もうすでにご存知のこととは思いますが、 >>ブラウザの開発者ツールを利用することでウェブサイトをデバッグすることができます。 >>こちらに質問する前にまずはご自身でデバッグするのが筋ではないでしょうか。 ? どうしてそうお考えになったのかは存じませんが、 デバックの方法など知りませんし、それが質問の際の筋だという考えに同意できません。 私なりに調べたうえで注意深く質問しています。 一応、アドビの検出ソフトを使って明らかな記述ミスがないように注意したうえで質問しているのです。 私はJavascriptに関して素人です、と既に明記しています。 以下のサイトで私なりに調べてみましたが、どう直せばよいのか分かりようがないでしょう。 https://msdn.microsoft.com/library/dn255007(v=vs.85).aspx