• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：javascriptの音楽再生）

JavaScriptの音楽再生

このQ&Aのポイント
  • JavaScriptを使用して音楽を再生する方法について質問があります。
  • 条件分岐を使用して、特定の条件下で音楽を再生しようとしていますが、うまく再生できません。
  • 再生するファイルのURLを指定し、再生を開始するコードを記述しています。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

何が原因かわかりませんが、動かないのであれば １，mp3音声ファイルを送ってくれているサーバが正しいmime/typeで送り出している？ audio/mp3　が正しいみたい。 mime/typeおかしかったら多くのブラウザで動かない。 サーバの設定を変更。.htaccessとかで ２，すべてのブラウザでmp3が再生できるわけでもないのでそのあたりの対応 http://fmbip.com/litmus ↑ これも最新版かどうかは未確認 ３，movieファイルやaudioファイルってクロスドメイン制限なかったのか気になる所。 覚えてないけど、画像はクロスドメイン制限ないから動画や音楽もないような気がする！ なのでこれは原因ではなさそう。

yodogou
質問者

補足

遅くなりました、回答有難う御座います。 実はスマートフォンでの動作確認なんです。 もしかしたら、そのあたりが原因かもしれません。 自分でも再度調べなおしてみますが、ご存じなら教えて頂けないでしょうか。宜しくお願い致します。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 外部mp3のランダム再生について

    初めまして。 AS3.0をまだ勉強中で見よう見まねで作っている状態ですが、 なんとか完成させたいのでご教授ください。 ■目標 ボタンをクリックすると外部mp3が再生。 ただし、音声は複数ありクリックする度にランダムでmp3を再生するようにしたいです。 ■現状 現状はランダムに読み込んでクリックすると再生まではできたのですが、 何度クリックしても最初に読み込んだ同じ音声しか再生されません。 ひたすら繰り返しにすればよいのかと思い、2フレーム目を用意したところ、 ランダム再生にはなったのですが、何もしていない状態でもひたすら読み込みを続けてしまい理想の動きではありませんでした。クリックする度にランダムで読み込めればと思いますが、 どのように書けば良いのかわかりません、よろしくお願いします。 ・ボタンインスタンス名 play_btn ・ファイル mp3/sound0.mp3 mp3/sound1.mp3 mp3/sound2.mp3 ・環境 windows7 FlashCS5 ActionScript3.0 ************ソース*************** import flash.net.URLLoader; var rand_num:int = Math.floor(Math.random() * 2); var name_str:String = "mp3/sound" + rand_num + ".mp3"; var mp3_url:URLRequest = new URLRequest(name_str); var sndCh:SoundChannel; var snd:Sound = new Sound(); snd.load(new URLRequest(name_str)); play_btn.addEventListener(MouseEvent.CLICK, xPlayClick); function xPlayClick(evt:MouseEvent):void { sndCh = snd.play(0, 1); } *************END*************** よろしくお願いします。

    • ベストアンサー
    • Flash
  • javascriptのaudioで困ってます。

    ブラウザーで音楽を再生させたいと思い、いろいろ調べながら下記のようにつくってみましたが、うまく再生されません。 やりたいことは、ローカルファイルからユーザーが選択した音楽ファイルをaudio要素のsrcわたして、再生させたいと考えています。 inputタグでユーザーが選択したファイルへのパスを取得する方法がよく分かってません。window.webkitURL.createObjectURL(this.files[0]);の部分はブラウザーによっていろいろ変わるのでしょうか？ファイルへのパスを取得する別の方法があるのでしょうか？もっとほかに原因があるのでしょうか？分かっていないことが多いのです。教えていただければありがたいです。よろしくお願いします。 <!doctype html> <html> <head> <title>audio test</title> <script type="text/javascript"> var audio_src; document.getElementById('input').onchange = function() { audio_src = window.webkitURL.createObjectURL(this.files[0]); // AudioElement を作成 var audio = new Audio(); // サウンドファイルまでの URL アドレスを指定 audio.src = audio_src; // 再生を開始する audio.play(); }; </script> </head> <body> <input type="file" id="input" /> </body> </html>

  • JavaScriptアニメーションについて質問！！

    学校の授業の入門編でやったことです だから初心者です 使用ソフトはEmEditot, Internet Explorerです。 ペイントを使い　01.gifから順番に06まで絵をかきました そしてz:\local\100のフォルダに保存 z:\local\100 フォルダ内で 右クリック → [新規作成] → [テキストドキュメント] ファイル名を 100.html とする(注意が表示されるが実行する) 100.html を EmEditorで開く (アイコン上で 右クリック→[送る]→[EmEditor]) 以下のHTML文書を入力する（HTML文書をドラッグしてEmEditorに貼り付けてよい） xx, yy は作成した画像の幅と高さ, nnは画像枚数である それぞれを置き換えること gif形式(.gif)の画像として記述しているので他の形式の場合は拡張子を書き換えること <html> <head> <title>GIFアニメーション</title> <script language="JavaScript"> <!-- var num = nn; var ani = new Array(); for (var i=1;i<=num;i++){ if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; } else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; } } var i=1; function start(){ document.pic.src=ani[i].src; i++;if(i>num)i=1; setTimeout("start()",200); } // --> </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="xx" height="yy" /> </body> </html> という説明文があり　 <html> <head> <title>GIFアニメーション</title> <script language="JavaScript"> <!-- var num = 06; var ani = new Array(); for (var i=1;i<=num;i++){ if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; } else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; } } var i=1; function start(){ document.pic.src=ani[i].src; i++;if(i>num)i=1; setTimeout("start()",200); } // --> </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="128" height="128" /> </body> </html> まで書いたのですが　1枚しかネット上には表示されず アニメーションになりませんでした。 どうすれば　コマ送りみたいなアニメーションになりますか 書き方を教えてください

  • javascriptを使って画像を切り替える

    javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒　 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒　… と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ 　var ch = document.getElementById("changeImg"); 　ch.src=img[num].src; 　 if(num<4){ 　 　 num++; 　 }else{ 　　 num=0; 　 } 　 setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。

  • javascriptでの画像の先読みについて（その２）

    その１からの続きです。。 以下が私の作ったソースです。 <script language="JavaScript"> <!-- var flag=new Array(); var image=new Array(); var img=new Array(); // gif画像の先読み img[0]=new Image();img[0].src="透明gif"; img[1]=new Image();img[1].src="上向き矢印.gif"; img[2]=new Image();img[2].src="矢印の線.gif"; img[3]=new Image();img[3].src="下向き矢印.gif"; var on_mouse=144; for (i=0;i<144;i++) {flag[i] = 0;} function on_image(num){ on_image_no = num; //マウスの位置(0～143) } function off_image(num){ on_image_no = 144; //範囲外 } function mouse_click(){ flag[on_image_no]=(flag[on_image_no]==0); var image_no=0; for(i=0;i<144;i++){ if(flag[i]){ //フラグが立っていたら矢印の始点or終点を表示 if(image_no==0){ document.image[i].src=img[1].src; //上向き矢印 image_no=2; //次から矢印の線を表示 }else{ document.image[i].src=img[3].src; //下向き矢印 image_no=0; //次から透明なgifを表示 } }else{document.image[i].src=img[image_no].src;} } } //--> </script> ＃関係ないですけど、off_image()はいらないかも…。 以上、質問が長くなってしまって大変恐縮ですが、どなたか私をお助けください。 よろしくお願いいたします。 関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=319633

  • javascriptのエラーを修正したいです。

    javascriptのエラーを修正したいです。どなたか教えて下さい。 下記のjsの内容でシンタックスエラーが出ます。indexページを自動で１４通り変更する設定の一部なのですが どうしてもエラーを解除できません。知識不足ですいませんがどなたか教えて頂けませんでしょうか？ function check(y){return (y%4==0&&(y%400==0||y%100!=0))?true:false;}//うるう年チェック関数 if(addr.charAt(addr.length-1)!="/") addr += "/"; var list = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var date = new Date(); var today = [date.getYear(),date.getMonth()+1,date.getDate()]; var t_r = refer[0]*365+refer[2]; var t_t = today[0]*365+today[2]; if(check(refer[0])) ++refer[0]; if(check(refer[1])) ++refer[1]; for(var i=0;i<refer[1]-1;++i)t_r += list[i]; for(var i=0;i<today[1]-1;++i)t_t += list[i]; var str = addr+format.replace("NN",("0"+((t_t-t_r+1)%length)).slice(-2)); if(mode==0) = location.href= str; else document.getElementById("frame").src = str; </script> if(mode==0) = location.href= str; else document.getElementById("frame").src = str; この部分がシンタックスエラーが出ます。どのように修正すれば良いでしょうか？ この上記の部分の正しい記述の仕方を教えて頂けると助かります。 よろしくお願い致します。

  • JavaScriptに関する簡単な質問です。

    <script> var image1=new Image(); image1.src = "image/ny.jpg"; var image2=new Image(); image2.src = "image/tokyo.jpg"; var i = 1; function change(){ if(i==1){ element.src=image2.src; i=2; }else{ element.src=image1.src; i=1; } } </script> <img id="photo" src="image/ny.jpg" /> <script> var element = document.getElementByid("photo"); element.onclick=change; </scropt> オンクリックで画像が切り替わるというスクリプトなのですが、 new Image() というのは new date() と言うのと関係しているのでしょうか。 var i=1 と言うあたりからよくわからなくなってしまいます。 最後のelement.onclick=change;と言うのもよくわかりません。 スクリプトを平易な日本語で、簡単に説明してもらえるとありがたいです。 よろしくお願いします。

  • ActionScriptでサウンドをループさせる

    ActionScriptでサウンドをループ再生させたいです。 var url : URLRequest = new URLRequest("xxx.mp3"); var sound_obj : Sound = new Sound(url); sound_obj.play(0,1); とすることで目的のサウンドを1回だけ再生させることができるのは分かるのですが、 無限にループ再生させたい場合は sound_obj.play(0,1); の第二引数にどの値を入れればいいのでしょうか？ よろしくお願いします。

  • JavaScript　時間ごとに画像を変える。

    JavaScriptで時間ごとに画像を変える様にしたいのですが、 画像が表示されません(T_T) どこが間違っているのでしょうか？ function setImg(){ var gTime02 = (new Date()).getHours(); var arImg = new Array("9_12.gif","13_15.gif","16_18.gif","19_08.gif"); function ifImg(){ if(gTime02 >= 9 && 12 >= gTime02){ arImg[0]; }else if(gTime02 >= 13 && 15 >= gTime02){ arImg[1]; }else if(gTime02 >= 16 && 18 >= gTime02){ arImg[2]; }else {arImg[3];} } document.write("<img src='images/"+ifImg+"' border='0' width='150' height='60'>"); }

  • 【javascript】ロールオーバーと画像自動切換えがバッティングし

    【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。 javascriptは該当の動作がどれかというのが分かる程度で、書く事も修正する事もできません。 ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。 ページの遷移に問題はないのですが、他ページでは出来ているので何とかしたいと思っています。どうかお助け下さい。 ≪ロールオーバー≫ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } ≪画像切り替え≫ window.onload = function(){ var num = 1; setInterval(function(){ document.getElementById('link' + num).style.display = 'none'; num = document.getElementById('link' + (num+1))? ++num : 1; document.getElementById('link' + num).style.display = 'block'; },7500); }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する