- ベストアンサー
SafariでもBGMを流す方法は？
- SafariでBGMを流す方法を探していますが、XHTMLの<embed>タグでは音が鳴らないようです。他の方法を教えてください。
- 質問者はXHTMLで作成したサイトでBGMを流したいと考えていますが、<embed>タグを使ってもSafariでは音が鳴らないようです。他の方法を教えてください。
- XHTMLで作成したサイトでBGMを流したいが、Safariでは<embed>タグでは音が鳴らないようだ。他の方法があれば教えてほしい。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＜midiではなくて、mp3なら、適当なFlashを作って、そのFlash自体にmp3ファイルを埋め込んで(？)音が鳴るようにする、ということでしょうか？＞ そのとうりなんですが、最初の回答で私が答えた 「今時は音 楽はMP3が主流です。MP3に変換してフラッシュで再生ってわけにはいかない んでしょうか。」 の部分は無視してください。MIDIもりっぱな音楽コンテンツです。私もMIDI が好きです（MIDIコードをPC上でアレンジ・編集が自在だからです。） ただ、WebだとMIDIサポートのプレーヤープラグインが少なくて、 WMP(WindowsMdeiaPlayer)、Winamp(MP3プレーヤー)、MIDPLUG（ヤマハ製もう配布されてない）... とQuickTime（アップル製）ぐらい？ この中たいていのOSやブラウザーに対応してるのはQuickTime（アップル製）でしょう。 MP3に変換しても、マクロメディア社買収以降アドビとアップルとの関係 が最近特に悪くなっているので、MACユーザーはフラッシュでハッピーにな れないかも知れない。 そおいったわけで、QuickTimeでMIDI再生がよさげかなと思いました。 サンプルとして、ごちゃごちゃしたのを提示しましたが、単純にBGM を背後で流すだけなら、 <div> <script type="text/javascript" src="/jslib/AC_QuickTime.js"></script> <script type="text/javascript"> //<![CDATA[ QT_WriteOBJECT_XHTML('/music/bird.mid','0px','0px','', 'AUTOPLAY','True','CONTROLLER','false',"LOOP","true"); //]]> </script> </div> だけでOKです。 それから、AC_QuickTime.jsの最新バージョンは、 http://developer.apple.com/safari/library/samplecode/HTML_video_example/listing1.html から取った方が最新（Ver1.2）です。バグも報告されてます http://lists.apple.com/archives/QuickTime-Users/2009/Jun/msg00061.html 最後に、いろいろ試行錯誤して、調べて、最終形にした。 サンプルソースを載せときます。（少しながら短くしました） <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title>Play MIDI By Quick Time Player</title> <style type="text/css"></style> <script type="text/javascript" src="/jslib/AC_QuickTime.js"></script> <script type="text/javascript"> //<![CDATA[ window.onload = function () { AddListener('qt_load',qtLoad); } function qtLoad(){ var objname=window.ActiveXObject?"bgmplayer_obj":"bgmplayer"; var obj=document.getElementById(objname); obj.SetControllerVisible(false); obj.style.height = '0px'; obj.style.width = '0px'; document.getElementById("loadStatus").innerHTML="BGM Loaded"; } function AddListener(eventName,listenerFcn){ var objname=window.ActiveXObject?"bgmplayer_obj":"bgmplayer"; var obj=document.getElementById(objname); if(window.ActiveXObject){ obj.attachEvent('on'+eventName,listenerFcn); }else{ obj.addEventListener(eventName,listenerFcn,false); } } function bgmStart(){ var objname=window.ActiveXObject?"bgmplayer_obj":"bgmplayer"; document.getElementById(objname).Play(); } function bgmStop(){ var objname=window.ActiveXObject?"bgmplayer_obj":"bgmplayer"; document.getElementById(objname).Stop(); } function bgmChg(midi){ var objname=window.ActiveXObject?"bgmplayer_obj":"bgmplayer"; document.getElementById(objname).SetURL(midi); } function bgmCtrl(tgl){ var objname=window.ActiveXObject?"bgmplayer_obj":"bgmplayer"; var obj=document.getElementById(objname); if(tgl==true){ obj.SetControllerVisible(true); obj.style.height = '50px'; obj.style.width = '200px'; }else{ obj.SetControllerVisible(false); obj.style.height = '0px'; obj.style.width = '0px'; } } //]]> </script> </head> <body> <p><h3>Play MIDI By Quick Time Player</h3></p> <div> <span>BGMの開始・切り替え・停止</span> <button onclick="bgmStart();">開始</button> <button onclick="bgmStop();">停止</button> <ol> <li><a href="javascript:bgmChg('/music/bird.mid')">サンダーバード</a></li> <li><a href="javascript:bgmChg('/music/JdaiAka.mid')">仮面の忍者 赤影</a></li> <li><a href="javascript:bgmChg('/music/jetter.mid')">スーパージェッター</a></li> <li><a href="javascript:bgmChg('/music/Tetudou.mid')">鉄道唱歌</a></li> </ol> <button onclick="javascript:bgmCtrl(true)">コントローラー表示</button> <button onclick="javascript:bgmCtrl(false)">コントローラー非表示</button> <p id="loadStatus">BGM LOADING...</p> </div> <div id="bgmCntr"> <script type="text/javascript"> //<![CDATA[ QT_WriteOBJECT_XHTML('/music/bird.mid','0px','0px','','AUTOPLAY','True','CONTROLLER','false', "LOOP","true","ENABLEJAVASCRIPT","true",'ALLOWEMBEDTAGOVERRIDES','true','SAVEEMBEDTAGS','true', 'postdomevents','true','emb#name','bgmplayer_obj','emb#id','bgmplayer', 'obj#name','bgmplayer_obj','obj#id' ,'bgmplayer_obj'); //]]> </script> </div> </body> </html>
その他の回答 (4)
- yyr446
- ベストアンサー率65% (870/1330)
詳しくQuickTimeコントロールの解説を見ると、 QuickTimeオブジェクトの取得が、IEとIE以外では違うみたいでした。 さらにDOMイベントも受け渡せるようにして、思惑どおりのができました。 これでもSafariでだめですか？ （サンプル） <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title>Play MIDI By Quick Time Player</title> <style type="text/css"></style> <script type="text/javascript" src="/jslib/AC_QuickTime.js"></script> <script type="text/javascript"> //<![CDATA[ function qtBegin(){ var obj=document.getElementById("bgmplayer_obj"); if(!window.ActiveXObject) obj = document.getElementById("bgmplayer"); obj.SetControllerVisible(false); obj.style.height = '1px'; obj.style.width = '1px'; } function myAddListener(obj,evt,handler,captures){ if (document.addEventListener){ obj.addEventListener(evt,handler,captures); }else{ obj.attachEvent('on' + evt,handler); } } function RegisterListener(eventName,objID,embedID,listenerFcn){ var obj = document.getElementById(objID); if(!obj) obj = document.getElementById(embedID); if(obj) myAddListener(obj,eventName,listenerFcn,false); } function bgmStart(){ var obj=document.getElementById("bgmplayer_obj"); if(!window.ActiveXObject) obj = document.getElementById("bgmplayer"); obj.Play(); } function bgmStop(){ var obj=document.getElementById("bgmplayer_obj"); if(!window.ActiveXObject) obj = document.getElementById("bgmplayer"); obj.Stop(); } function bgmChg(midi){ var obj=document.getElementById("bgmplayer_obj"); if(!window.ActiveXObject) obj = document.getElementById("bgmplayer"); obj.SetURL(midi); } function bgmCtrl(tgl){ var obj=document.getElementById("bgmplayer_obj"); if(!window.ActiveXObject) obj = document.getElementById("bgmplayer"); if(tgl==true){ obj.SetControllerVisible(true); obj.style.height = '50px'; obj.style.width = '200px'; }else{ obj.SetControllerVisible(false); obj.style.height = '1px'; obj.style.width = '1px'; } } //]]> </script> </head> <body> <p><h3>Play MIDI By Quick Time Player</h3></p> <div> <span>BGMの開始・切り替え・停止</span> <button onclick="bgmStart();">開始</button> <button onclick="bgmStop();">停止</button> <ol> <li><a href="javascript:bgmChg('/music/bird.mid')">サンダーバード</a></li> <li><a href="javascript:bgmChg('/music/JdaiAka.mid')">仮面の忍者 赤影</a></li> <li><a href="javascript:bgmChg('/music/jetter.mid')">スーパージェッター</a></li> <li><a href="javascript:bgmChg('/music/Tetudou.mid')">鉄道唱歌</a></li> </ol> <button onclick="javascript:bgmCtrl(true)">コントローラー表示</button> <button onclick="javascript:bgmCtrl(false)">コントローラー非表示</button> <div id="bgmCntr"> <script type="text/javascript"> //<![CDATA[ QT_WriteOBJECT_XHTML('/music/bird.mid','200px','50px','','AUTOPLAY','True','CONTROLLER','false', "LOOP","true","ENABLEJAVASCRIPT","true",'ALLOWEMBEDTAGOVERRIDES','true','SAVEEMBEDTAGS','true', 'postdomevents','True', 'emb#name','bgmplayer', 'emb#id','bgmplayer', 'obj#name','bgmplayer_obj', 'obj#id','bgmplayer_obj'); RegisterListener('qt_load','bgmplayer','bgmplayer_obj',qtBegin); //]]> </script> </div> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
致命的な事に気づきました。 QuickTimePlayerを配置する要素のStyle display属性を"NONE"に すると、プレーヤーオブジェクトが操作不能・停止します。 BGMだと、コントローラーが邪魔くさいのでDIVの非標示で消してたけど、 ここは 'CONTROLLER','false' のオプションで表示・非標示コントロール しないとだめ、しかしコントローラー非標示でもスペースは取られているぞ もっと調べないと．．．（反省）
- yyr446
- ベストアンサー率65% (870/1330)
てなわけで、APPLのページ↓を参考に、QuickTimeでMIDIの http://developer.apple.com/safari/library/documentation/QuickTime/Conceptual/QTScripting_JavaScript/bQTScripting_JavaScri_Document/QuickTimeandJavaScri.html#//apple_ref/doc/uid/TP40001526-CH001-SW5 http://developer.apple.com/safari/library/documentation/QuickTime/Conceptual/QTScripting_HTML/QTScripting_HTML_Document/ScriptingHTML.html BGMを流すページのサンプルを作ってみた↓。 MACもSafariも持ってないので確認できませんが、鳴ってるでしょうかねえ？（広告は無視してね） IE8とFirefox3.6はOKでした。 ※QuickTimeのプラグインも必用ですよね。無い人には自動でApplのダウン ロードページへ飛ばす配慮も必要かな．． ※おもいっきしJavascript依存になってますが、参考サイトよく調べれ ば、Javascript無しでかつ<embed>無しの方法もあるかも．．． （ソース） <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title>Play MIDI By Quick Time Player</title> <style type="text/css"></style> <script type="text/javascript" src="/jslib/AC_QuickTime.js"></script> <script type="text/javascript"> //<![CDATA[ function bgmStart(){ document.bgmplayer.Play(); } function bgmStop(){ document.bgmplayer.Stop(); } function bgmChg(midi){ document.bgmplayer.SetURL(midi); } function bgmCtrl(tgl){ if(tgl==true){ document.getElementById("bgmCntr").style.display='block'; }else{ document.getElementById("bgmCntr").style.display='none'; } } //]]> </script> </head> <body> <div id="bgmCntr" style="display:none;"> <script type="text/javascript"> //<![CDATA[ QT_WriteOBJECT_XHTML('/music/bird.mid','50%','20%','','AUTOPLAY','True','CONTROLLER','true', "LOOP","true","ENABLEJAVASCRIPT","true","ALLOWEMBEDTAGOVERRIDES","true",'obj#id','bgmplayer', 'emb#name','bgmplayer') ; //]]> </script> </div> <p><h3>Play MIDI By Quick Time Player</h3></p> <div> <span>BMMの開始・切り替え・停止</span> <button onclick="bgmStart();">開始</button> <button onclick="bgmStop();">停止</button> <ol> <li><a href="javascript:bgmChg('/music/bird.mid')">サンダーバード</a></li> <li><a href="javascript:bgmChg('/music/JdaiAka.mid')">仮面の忍者 赤影</a></li> <li><a href="javascript:bgmChg('/music/jetter.mid')">スーパージェッター</a></li> <li><a href="javascript:bgmChg('/music/Tetudou.mid')">鉄道唱歌</a></li> </ol> <button onclick="javascript:bgmCtrl(true)">コントローラー表示</button> <button onclick="javascript:bgmCtrl(false)">コントローラー非表示</button> </div> </body> </html> おおーと、HTML-Lintで16点だった。 原因は、<button>タグ使った事と、javascriptを外部ファイルに してない事（サンプルだからしょうがない）とかonclickを 怒られているだけなので、本投稿とは関係ないですね。
お礼
詳しい回答ありがとうございます。 コントローラー非表示にすると確かにおとが鳴らなくなってしまいました・・・。 もし、midiではなくて、mp3なら、適当なFlashを作って、そのFlash自体にmp3ファイルを埋め込んで(？)音が鳴るようにする、ということでしょうか？
- yyr446
- ベストアンサー率65% (870/1330)
メディアソースとしてMIDIにどうしてもこだわっているのですか？今時は音 楽はMP3が主流です。MP3に変換してフラッシュで再生ってわけにはいかない んでしょうか。 MIDIでSafari（MACですよね）となるとAPPLEのQuickTimeのプラグインを使うという案で、「AC_QuickTime.js」というAPPLE提供のJAVASCRIPT使えば、 動的にQuickTimeのプラグインのコントロールオブジェクトが作れるので、 <embed>は不要になるかと。 ちょこっと試してみます。でもMACもSafariも持ってないので、 このスクリプトがマルチブラウザー対応である事を期待して．．．
お礼
音鳴りました！！ 詳しくありがとうございました！！