ホームページ上での音楽再生に関する質問
- ホームページ上で音楽を再生するための基本的なコードを作成しましたが、Web上で再生されません。何が原因かわかりません。
- サーバ化した自宅PC上では問題なく音楽が再生されるのに、Web上では再生されません。原因が分からず困っています。
- 音楽ファイルは正常にローカル環境で再生されるのに、Web上では再生されません。どうすれば解決できるでしょうか。
- ベストアンサー
ホームページ上での音楽再生に関する質問です。
私は現在初めてホームページ作成を行っている者です。 HTMLとJavaScriptを使ってホームページを作ろうと思い、作業を開始しました。 自宅PCをサーバとして機能させ、また音楽を再生するサイトを作りたいと思っています。 そこで http://q.hatena.ne.jp/1179831319 こちらのサイトを参考にし、 <html> <head> <script type="text/javascript"> soundlist = ['1.mid', '2.mid', '3.mid'] ; path = './midifiles/' ; // ファイルのあるディレクトリのパス function soundPlay(n) { var option = '"' ; option += ' autostart = "true"' ; // 自動再生 option += ' loop = "true"' ; // ループ再生 option += ' style = "position:absolute;bottom:100%;"' ; // スタイル document.getElementById('player').innerHTML = '<embed src="' + path + soundlist[n-1] + option + ' />' ; document.getElementById('stopbutton').disabled = false ; } function soundStop() { document.getElementById('player').innerHTML = '' ; document.getElementById('stopbutton').disabled = true ; } </script> </head> <body> <form> <button type="button" onclick="soundPlay(1)">音楽1</button> <button type="button" onclick="soundPlay(2)">音楽2</button> <button type="button" onclick="soundPlay(3)">音楽3</button> <button type="button" id="stopbutton" onclick="soundStop()" disabled="true">停止</button> </form> <div id="player"></div> </body> </html> 基本のコードは上記のままでホームページを作成し、ローカル環境では問題なく動作しました。 しかし、 AnHttpdを使い、No-IP.comでURLを取得し、自宅PCをサーバ化した所までは良かったのですが、 Web上でページにアクセスすると上手く音楽が再生されなくなってしまいました（その他の画像や文字の文体等は問題ありません）。 コマンドプロンプトで確認もしましたが、URLの関連付けも問題なく行われており、ページの表示自体には何の問題もありません。ただ音楽ファイルだけ再生出来なくなりました。 私としてはサーバに指定したフォルダ内にpathに指定したディレクトリを作成し、そこに音楽ファイルを入れておけば、ボタンクリック時にそのファイルが参照され、再生されるものと思っておりました。 メディアプレイヤーなどは表示したくはないので、上記のコードを参考にしていたのですがここにきて行き詰ってしまった次第です。 他にも色々なサイトを巡って調べてみましたが、恥ずかしくも原因がよくわかりませんでした。 もしかしたら既知の方からすれば、非常に簡単な問題なのかもしれませんが、私にとっては頭を悩ませる難解な問題です。 音楽ファイル一つ一つはMatlabで作成した単純な短い正弦波ですので、サイズは300KByte以下です。wavファイルだから駄目なのかもと思いもしましたが、ローカル環境では、mp3,midi,wavのいずれのファイルも再生可能でしたので、それが原因だとは思えません。 ホームページ作成言語や仕組みに関しては素人同然の私ですが、なんとか完成させたいと思っています。些細なことでも結構ですので、何か参考になりそうなことがありましたら、ご教授お願いします。 お早い回答を頂けましたら幸いです。 どなたかよろしくお願いします。
- www4278
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
はじめまして。 先ずはログファイル見たほうがいいと思います。音楽ファイルが再生できればアクセスログに残り、そうでない現状ではエラーが上がっているはずです。そのエラーの内容から、何かしらの設定のミスを推測していく…、という流れです。 ログに「404 Not Found」が上がっているに1票投じます。 Webサーバーからファイルが見えないので再生ができないんでしょう。 ドキュメントルートの設定があってないか、MIMEの設定の問題かと。 MIMEの設定は参考URLを読んで下さい。
その他の回答 (1)
- wpwpwpw
- ベストアンサー率38% (57/148)
Flashを0pxで作り、そこへ音楽を埋め込むって手もありますよ。
お礼
回答ありがとうございます。 今後の展望としてもフラッシュの導入は考えておりますので参考にさせていただきます。
関連するQ&A
- ホームページでBGM
過去の投稿をもとにホームページ内にプルダウン式の音楽再生用のHTMLを書き込んだのですが、Web上で再生しようとすると、 「ランタイムエラーが発生しました。デバッグしますか？ 行：13 エラー：書き込みできません となってしまいます。 ホームページ作成ソフト（ビルダー7）のプレビューでは再生されます。 これはどうしてでしょうか？？ 以下にHTMLを書いておきます。 <SCRIPT LANGUAGE="JavaScript"> <!-- function MyLink(){ alink=document.flink.slink; mlink=alink.options[alink.selectedIndex].value; if(mlink!="-"){ location.href=mlink; } } //--> </SCRIPT> <form method="post" name="flink"><select name="slink"> <option selected value="-">選んでね</option> <option value="-">・・・・・・・・・・・・・</option> <option value="C:\Documents and Settings\****My Documents\****.mid">music1</option> <option value="C:\Documents and Settings\****My Documents\****.mid">music2</option> <option value="C:\Documents and Settings\****My Documents\****.mid">music3</option> <option value="-">・・・・・・・・・・・・・</option> </select> <input type="button" value="GO!" onClick="MyLink()"></form>
- ベストアンサー
- HTML
- Javascriptによるフォームの選択表示について教えてください。
Javascriptによるフォームの選択表示について教えてください。 概要としてはカートCGIのお客様情報入力欄のカスタマイズを行なっています。 別の場所への発送を希望される場合において(1)、(2)、(3)のラジオボタンを作り、それぞれ選択によって該当のフォームを表示するところまではできました。 問題は、(1)→１箇所、(2)→３箇所、(3)→５箇所とフォームを作ったところ、入力ページが表示された時点で(1)(2)(3)全ての表示がされた状態で表示されます。 ちなみに、その際にラジオボタンを選択すると(1)(2)(3)それぞれに対応したフォームが表示され切り替わります。 実際にやりたいことは、ページが表示された時点で(1)のフォームのみ表示されるようにし、(2)(3)とラジオボタンを選択された際にそこで初めて(2)(3)のそれぞれのフォームを表示したいと思っています。 以下はソースです。 ■Javascript <script type="text/javascript"> function func1() { document.getElementById("sele1").style.display="inline"; document.getElementById("sele1").disabled=false; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func2() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="inline"; document.getElementById("sele2").disabled=false; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func3() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="inline"; document.getElementById("sele3").disabled=false; } </script> ■CGI(HTML)側 <form action="xxx"> <table border=0 cellpadding=5 cellspacing=2 width=500> <p>発送先が２箇所以上の場合はこちらから選択ください。 <input type="radio" value="1" onclick="func1('block')" />１箇所</label> <input type="radio" value="2" onclick="func2('none')" />２箇所</label> <input type="radio" value="3" onclick="func3('none')" />５箇所</label> </p> </table> <table id="sele1"> </table> <table id="sele2"> </table> <table id="sele3"> </table> </form> table内容は省略しています。 説明が下手ですがどうかご教授ください。宜しくお願いします。
- ベストアンサー
- JavaScript
- javascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。
モと表示された１個のボタンと穴と表示された２個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。 最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。 あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜ おねがいします！！！ 全然違うかもしれませんが、つくってみたのものっけておきます <html> <head> <title></title> <script type="text/javascript"> var moFlg = true; function func(){ if (moFlg) { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "モ"; document.getElementById("btn03").innerHTML = "穴"; moFlg = !moFlg; } else { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "穴"; document.getElementById("btn03").innerHTML = "モ"; moFlg = !moFlg; } } </script> </head> <body> <button id="btn01" type="button" " onClick="func()"> モ </button> <button id="btn02" type="button" " onClick=""> 穴 </button> <button id="btn03" type="button" " onClick=""> 穴 </button> </body> </html> ここまでです。 でもできたら<input type ～ button ～ onClick>とかがつかわれているとうれしいです。
- ベストアンサー
- JavaScript
- radioボタンの値の取得の仕方？
こんにちは，よろしくお願いします。 ラジオボタンの値でテキストフィールドのような要素をdisabledにしようと考えています。 そこで <input name="AAA" type="radio" id="AAA_0" value="0" checked="checked" onclick="xxx()"/>選択肢Ａ <input name="AAA" type="radio" id="AAA_1" value="1" onclick="xxx()"/>選択肢Ｂ とし，javascriptのxxx functionの中では， if(document.getElementById("AAA").value == 0){ document.getElementById("BBB").disabled = true; }else if(document.getElementById("AAA").value == 1){ document.getElementById("BBB").disabled = false; } } としてみたところ，いつも document.getElementById("AAA").value の値が０のままでいくら選択肢Ｂをクリックしても切り替わりません。 一体何が悪いのでしょうか。教えてください。よろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- ボタンを動的にdisabledさせたいのですが
お世話になります。 ある画面に複数ボタンがあって 押されたボタンをdisabledにしたいなと思っています。 ただしどのボタンがおされても同じ関数に飛んでほしいのですが いまいち解決できません。 <form name="form"> <input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()"> <input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()"> <input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()"> </form > とあった場合 function hogehoge(){ document.form.ボタンの名前.disabled=true; } としたいのですが 名前の部分は動的に変えることは可能なのでしょうか？ 普通に document.form.syori1.disabled=true; と書けば簡単なのですが、ボタンの数が決まっていないためボタン名を指定して書くことはできません。 ボタン名は onClick="javascript:hogehoge(document.form.ボタンの名前.name)" で、送ることができるのは確認したのですが hogehoge(ボタンの名前) の方でどうやってdisabledのところに入れればいいか解りません。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 音楽をHP上に埋め込み再生するとブチブチと音が途切れる
HPにBGMを流したいと思い EMBEDタグでMIDIを埋め込んだのですが、 音楽がブチブチと途切れ途切れに再生され 最終的には再生されなくなります。 プレイヤーは動いているのですが 音楽が完全に聞こえなくなるんです(フェイドアウトしていく。 プレイヤーをブチブチなっていた位置に戻すと 普通に再生されるのですが しばらくたつとまたブチブチと途切れてしまいます。 これはMIDIが悪いのでしょうか？ ブラウザの問題でしょうか？ それともタグが間違っているのでしょうか？ タグは音楽埋め込みタグを公開していたサイトから コピペしてきたものですので間違ってはないと思います。 <EMBED src="***.mid" type="audio/midi" width="150" height="20" panel="0" autostart="true" loop="true" repeat="true" text="***" nojava="true"> あまりにも音楽が途切れるので BGSOUNDタグを使いMIDIが再生されるか試してみました。 <BGSOUND src="***.mid" loop="infinite"> これなら、ブチブチとはならず比較的スムーズに再生されます。 しかし、このタグはIEブラウザしか機能しないようなので… FirefoxやNetscapeのブラウザでも再生されるようにしたいのですが どうすれば良いでしょうか？？ よろしくお願い致します。
- 締切済み
- HTML
- 複数ボタンのクリックイベント
JavaScriptのイベントなのか変数のスコープなのかで質問がございます。 （一番下に全ソースを貼りました。見づらくて申し訳ありません。） htmlに複数の似た名前のボタンがあります。 名前：button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ 望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) { document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。 私の認識、以下です。 ・0～９のイベントは正しく登録されている。 ・しかし、全てがchecked(10)を呼んでいる 質問１ これを回避する方法と、その対処理由を教えて頂きたくお願い致します。 質問２（オプション） 参考になる資料を教えていただければ幸いです。 例）サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等 よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。 */ for (i=2; i<4; i++) { document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>
- 締切済み
- JavaScript
- onClickがinput type="image"だとできない！
以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、 ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか？ 教えてください！ 現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体： <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>
- ベストアンサー
- JavaScript
- 質問の回答によって次に質問が出るようにしたい
質問１ではいを選ぶと質問２が現れるようにしたいです。 現在次のようにしています ヘッダー function disabled_ctrl() { for (cnt=0;cnt<document.form1.aaa.length;cnt++) { if (document.form1.aaa[cnt].checked==true) { kotae_id = document.form1.aaa[cnt].value; break; } } if(document.getElementById) { document.getElementById("abc1").style.display = "none"; document.getElementById("abc2").style.display = "none"; if(kotae_id=="1"){ document.getElementById("abc1").style.display = "block" } else{ document.getElementById("abc2").style.display = "block" } } } ボディー部分 <form name=form1> 質問１ <input name="aaa" type="radio" onClick="disabled_ctrl()" value="1">はい<input name="aaa" type="radio" onClick="disabled_ctrl()" value="2" checked>いいえ <div id="abc1" style="display:block"> 質問２ </div> <div id="abc2" style="display:block"> </div> </form> 最初は質問２が消えた状態にしたいのですが、このままの状態では、idがabc1とabc2の両方が表示された状態のようで、質問１をいったん「はい」にした後に「いいえ」にしないと質問２が消えません。 onClickだから当然だといえば当然だと思いますが、最初からこのJAVAスクリプトを読み込んで、実行してもらいたいのですがどうして良いか解決できません。 どなたか教えて下さい。 ネットでがんばって調べたのですが、ジャバは知識があまりにも薄く何とキーワードを入れていいかも分からずこれといったヒントが出てきません。
- ベストアンサー
- JavaScript
- checkboxクリック時、SQLを実行し、ボタンの有効・無効を判定する方法について
checkboxクリックをクリックすると、その時点でSQLを実行し、その結果によりボタンの有効・無効を決めたいと思っております (あるチェックボックスが選択されている状態では、特定のボタンを無効化し、選択できないようにしたいと思います)。 しかし数点詰まってしまった所がございましたのでアドバイスいただける方がいらっしゃいましたら、よろしくお願いします。 私が試した所、下記の条件付きであればデータベースの中身を見て、その内容をボタンに反映させる事が出来ました。 【現状】 1. 予めSQLを実行して結果を変数に格納しておき、checkboxクリック時にその変数を呼び出す。 2. checkboxは1つのみ(現在はデータベースの最終行の値でボタンの有効・無効が決定されております)。 それを下記のように修正したいと思ったのですが、方法が分かりませんでした。 【やりたいこと】 1. SQLは予め実行するのではなく、checkboxクリック時に実行したい。 2. checkboxが3つあった場合、1つめのcheckboxクリック時はテーブルの1行目、2つめのcheckboxクリック時はテーブルの2行目の値を見に行きたい。 【テーブル構造(mysql使用)】 －－－－－－－－－－－－－－－－－ ｜ ｜field1｜field2｜field3｜ －－－－－－－－－－－－－－－－－ ｜１行目｜ 1 ｜ 0 ｜ 1 ｜ －－－－－－－－－－－－－－－－－ ｜２行目｜ 0 ｜ 1 ｜ 1 ｜ －－－－－－－－－－－－－－－－－ ｜３行目｜ 1 ｜ 0 ｜ 0 ｜ －－－－－－－－－－－－－－－－－ 【ソースコード】 <?php $connect = mysql_connect('localhost', 'データベースユーザー名', 'データベースユーザーパスワード名'); mysql_select_db('データベース名', $connect); $query = mysql_query("SELECT * FROM テーブル名", $connect); while ($row = mysql_fetch_array($query)) { $ans1 = $row["field1"]; $ans2 = $row["field2"]; $ans3 = $row["field3"]; } mysql_close($connect); ?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> <script type="text/javascript"> function checkbox_func() { var ans1 = "<?php echo $ans1 ?>"; var ans2 = "<?php echo $ans2 ?>"; var ans3 = "<?php echo $ans3 ?>"; if (document.getElementById("checkbox_form").check1.checked) { // 0なら有効, 1なら無効 if (ans1 != 0) { document.getElementById("button1").disabled = true; } else { document.getElementById("button1").disabled = false; } if (ans2 != 0) { document.getElementById("button2").disabled = true; } else { document.getElementById("button2").disabled = false; } if (ans3 != 0) { document.getElementById("button3").disabled = true; } else { document.getElementById("button3").disabled = false; } } else { document.getElementById("button1").disabled = false; document.getElementById("button2").disabled = false; document.getElementById("button3").disabled = false; } } </script> </head> <body> <form id="checkbox_form" name="checkbox_form" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>"> <p>チェックボックス1<input type="checkbox" name="check1" value="check1" onclick="checkbox_func()" onkeypress="checkbox_func()" /></p> </form> <input id="button1" type="button" value="ボタン１" /> <input id="button2" type="button" value="ボタン２" /> <input id="button3" type="button" value="ボタン３" /> </body> </html> 以上、よろしくお願いします。
- ベストアンサー
- PHP
お礼
回答ありがとうございます。 仰られた通りにエラーログファイルを参照しながらルート設定を変えていったところ、なんとか正しいルートを設定することが出来ました。 404 Not Found も正解です。 こんなにも早く解決するとは正直思っていなかったので大変助かりました。 ご丁寧にどうもありがとうございました。