SafariでもBGMを流す方法というのはありますか？

解決済

質問者：yoal
質問日時：2010/03/15 16:24
回答数：5件

カテゴリーはHTMLになっていますが、実際はXTMLで作っています。

あまり推奨はされませんが、HPでBGMを流そすことにしました。
※ここで言うBGMが流れるサイト、というのは自動的にBGMが流れるサイトのことです。

しかし、XHTMLでは<embed>を使うと文法チェッカーにひっかってしまいます。でも、私はこれ以外の方法が分からないので、以下のように記述してアップロードしたところ、Windowsでは一応音は鳴りました。しかし、Safariでは音がなりません。(多分厳しいブラウザだからでしょうね)

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta name="generator" content="mi with 'XHTML Mode'" />
<meta name="keywords" content="キーワード" />
<meta name="description" content="あああ" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" media="all" href="pc.css" />
<embed src="xx.mid" autostart="true" loop="false" hidden="true" />
<title>ページタイトル</title>
<script type="text/javascript" src="map.js"></script>
</head>


<body>
本文
</body>
</html>

・embedとbgsound以外(bgsoundもHTMLのタグだと文法チェッカーで出たため)のタグでBGMを流すには、どのタグを使えば良いのか？(SafariでもBGMが流れればなお良いです...)
・他にも間違った記述等あればご指摘お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： yyr446
回答日時：2010/03/17 18:26

＜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/sample …
から取った方が最新（Ver1.2）です。バグも報告されてます
http://lists.apple.com/archives/QuickTime-Users/ …

最後に、いろいろ試行錯誤して、調べて、最終形にした。
サンプルソースを載せときます。（少しながら短くしました）
<?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.dt …
<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>

- 0
- 件

通報する

No.4

回答者： yyr446
回答日時：2010/03/16 22:50

詳しく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.dt …
<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>

- 0
- 件

通報する

この回答へのお礼

音鳴りました！！
詳しくありがとうございました！！

通報する

お礼日時：2010/03/17 11:41

No.3

回答者： yyr446
回答日時：2010/03/16 18:54

致命的な事に気づきました。

QuickTimePlayerを配置する要素のStyle display属性を"NONE"に
すると、プレーヤーオブジェクトが操作不能・停止します。
BGMだと、コントローラーが邪魔くさいのでDIVの非標示で消してたけど、
ここは 'CONTROLLER','false' のオプションで表示・非標示コントロール
しないとだめ、しかしコントローラー非標示でもスペースは取られているぞ
もっと調べないと．．．（反省）

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2010/03/16 18:19

てなわけで、APPLのページ↓を参考に、QuickTimeでMIDIの

http://developer.apple.com/safari/library/docume …
http://developer.apple.com/safari/library/docume …
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.dt …
<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を
怒られているだけなので、本投稿とは関係ないですね。

- 0
- 件

通報する

この回答へのお礼

詳しい回答ありがとうございます。
コントローラー非表示にすると確かにおとが鳴らなくなってしまいました・・・。
もし、midiではなくて、mp3なら、適当なFlashを作って、そのFlash自体にmp3ファイルを埋め込んで(？)音が鳴るようにする、ということでしょうか？

通報する

お礼日時：2010/03/16 19:38

No.1

回答者： yyr446
回答日時：2010/03/16 15:53

メディアソースとしてMIDIにどうしてもこだわっているのですか？今時は音

楽はMP3が主流です。MP3に変換してフラッシュで再生ってわけにはいかない
んでしょうか。
MIDIでSafari（MACですよね）となるとAPPLEのQuickTimeのプラグインを使うという案で、「AC_QuickTime.js」というAPPLE提供のJAVASCRIPT使えば、
動的にQuickTimeのプラグインのコントロールオブジェクトが作れるので、
<embed>は不要になるかと。
ちょこっと試してみます。でもMACもSafariも持ってないので、
このスクリプトがマルチブラウザー対応である事を期待して．．．