2016-05-22 2 views
1

オンラインのストリーミングラジオのバックグラウンドミュージックやトークショーをバックグラウンドで再生しながら、簡単なWebページを作成したいと考えています。私はここで説明した方法に続い:https://productforums.google.com/forum/#!msg/chrome/hgxRgmT0INY/KR-CGxqdlN4JJavaScriptを使用してDOMにオブジェクトを追加した背景音楽

をそれがChromeで動作します。

<html> 
<head> 

<script language=javascript> 

function setupSound() 
{ 
    var obj = document.createElement("object"); 
    obj.width="0px"; 
    obj.height="0px"; 
    obj.type = "audio/mp3"; 
    obj.data = "http://mr-stream.mediaconnect.hu/4736/mr1.mp3"; 
    obj.setAttribute("id", "bgsound1"); 
    var paramobj=obj.appendChild(document.createElement('param')); 
    paramobj.name="loop"; 
    paramobj.value="-1"; 
    var body = document.getElementsByTagName("body")[0]; 
    body.appendChild(obj); 
    document.getElementsByName("button1")[0].onclick=function(){change_channel()};       
} 

function change_channel() 
{ 
var channels=[ 
["Music: MR1-Kossuth","http://mr-stream.mediaconnect.hu/4736/mr1.mp3"], 
["Music: none",""], 
["Music: MKR","http://katolikusradio.hu:9000/live_hi.mp3"], 
["Music: Karc FM","http://hosting.42netmedia.com:13100/;stream#.mp3"], 
] 

var channel_hash={}; 
var nextindex=0; 
for (var i=0;i<=channels.length-1;i++) { 
    nextindex=(i+1) % channels.length; 
    channel_hash[channels[i][0]]=[channels[nextindex][0],channels[nextindex][1]]; 
} 

document.getElementById("bgsound1").data=channel_hash[f2.button1.value][1] 
f2.button1.value=channel_hash[f2.button1.value][0] 

} 


</script> 
</head> 

<body onload="setupSound()"> 

<center> 
    <form name='f2'> 
     <input type=button name='button1' value='Music: MR1-Kossuth'> 
    </form> 
</center> 

</body> 
</html> 

私はこのJSFiddleを作ったが、それはチャンネルを果たしていない、まったく音: https://jsfiddle.net/gxeqsnL3/1/ 私は音を考えていませんiframeのためオブジェクトがDOMに正しく接続されていません。 コードはGoogle Chromeで動作しますが、ストリーミングラジオチャンネルからバックグラウンドミュージックがうまく再生されます。

私の主な問題は、URLにセミコロンが含まれているチャンネルに切り替えるときに、ブラウザからダウンロードドキュメントを取得することです。しかし、セミコロンが本当に必要なのは、ShoutCastラジオストリームがHTML5オーディオプレーヤーでも正しく再生されないためです。

答えて

0

コードを少し変更しました。 これは同じ動作ですが、<object> HTML要素を作成する代わりに、JavaScriptでnew AudioオブジェクトをHTMLタグを使用せずに作成します。

var audio = new Audio(); 
 
document.getElementsByName("button1")[0].onclick = change_channel; 
 

 
function change_channel() { 
 
    var nextindex = 0; 
 
    var channels = [ 
 
    ["Music: MKR", "http://katolikusradio.hu:9000/live_hi.mp3"], 
 
    ["Music: MR1-Kossuth", "http://mr-stream.mediaconnect.hu/4736/mr1.mp3"], 
 
    ["Music: none", ""], 
 
    ["Music: Karc FM", "http://hosting.42netmedia.com:13100/\;stream#.mp3"] 
 
    ]; 
 
    var channel_hash = {}; 
 

 
    for (var i = 0; i <= channels.length - 1; i++) { 
 
    nextindex = (i + 1) % channels.length; 
 
    channel_hash[channels[i][0]] = [channels[nextindex][0], channels[nextindex][1]]; 
 
    } 
 

 
    playSound(channel_hash[f2.button1.value][1]); 
 
    f2.button1.value = channel_hash[f2.button1.value][0]; 
 
} 
 

 
function playSound(file) { 
 
    if (file === "") { 
 
    console.log("Now playing: none"); 
 
    audio.pause(); 
 
    } else { 
 
    console.log("Now playing: " + file); 
 
    audio.pause(); 
 
    audio = new Audio(file); 
 
    audio.play(); 
 
    } 
 
}
<center> 
 
    <form name='f2'> 
 
    <input type=button name='button1' value='Music: none'> 
 
    </form> 
 
</center>

jsfiddle
https://jsfiddle.net/_jserodio/stag9p3r

+0

興味深い、全く私のために音が出ない。ボタンをクリックしてチャンネルを変更することはできますが、サウンドは再生されません。私は3つのブラウザを試しました。私はArch Linux、XFCEを使用しています。このバージョンにはセミコロンを含むURLが含まれています:http://jsfiddle.net/gxeqsnL3/19/ – Konstantin

+0

JavaScriptでAudioオブジェクトを使用するだけで、同じ動作をしますが、 '' HTML要素を作成するのではなく、 http://jsfiddle.net/_jserodio/stag9p3r/をチェックして、問題がなければ教えてください。それは私のために働いています。 –

+0

Thx、これは実際に動作します。 – Konstantin

0

ねえ、私はあなたが理解するのに役立つかもしれないあなたのためにいくつかの新しいコードを作りましたよ!

HTML

<input type="button" id="music_button" onclick="change_music()" value="No music"> 
<audio controls style="display:none" id="music" src=""> 
</audio> 

Javascriptを

var channels = [ 
    ["Music: MKR", "http://katolikusradio.hu:9000/live_hi.mp3"], 
    ["Music: MR1-Kossuth", "http://mr-stream.mediaconnect.hu/4736/mr1.mp3"], 
    ["Music: Karc FM", "http://hosting.42netmedia.com:13100/\;stream#.mp3"] 
    ]; 
var current_channel = 0; 

function change_music() { 
var button = document.getElementById("music_button") 
var music = document.getElementById("music") 
if(current_channel > 2) { 
current_channel = 0; 
button.value="No Music" 
music.src = ""; 
music.load() 
music.play() 
} 
else { 
button.value = channels[current_channel][0] 
music.src = channels[current_channel][1] 
music.load() 
music.play() 
current_channel++ 
} 

} 
関連する問題