我是新手，我希望有人可以帮助我完成这个JavaScript代码，方法是启用它来提取所提供的音频链接。
现在播放，暂停和下一首歌
以下是完整代码：
</script>
<script type="text/javascript">
function loadPlayer() {
var audioPlayer = new Audio();
audioPlayer.controls="";
audioPlayer.addEventListener('ended',nextSong,false);
audioPlayer.addEventListener('error',errorFallback,true);
document.getElementById("player").appendChild(audioPlayer);
nextSong();
}
function nextSong() {
if(urls[next]!=undefined) {
var audioPlayer = document.getElementsByTagName('audio')[0];
if(audioPlayer!=undefined) {
audioPlayer.src=urls[next];
audioPlayer.load();
audioPlayer.play();
next++;
} else {
loadPlayer();
}
} else {
alert('Error due to end Of Stations list or the Web Browser is not supported. Please use with Google Chrome');
}
}
function errorFallback() {
nextSong();
}
function playPause() {
var audioPlayer = document.getElementsByTagName('audio')[0];
if(audioPlayer!=undefined) {
if (audioPlayer.paused) {
audioPlayer.play();
} else {
audioPlayer.pause();
}
} else {
loadPlayer();
}
}
function pickSong(num) {
next = num;
nextSong();
}
var urls = new Array();
urls[-1] = 'http://mp3lg4.tdf-cdn.com/9079/jet_143844.mp3';
urls[-2] = 'http://mp3lg4.tdf-cdn.com/9077/jet_143651.mp3';
urls[-3] = 'http://mp3lg4.tdf-cdn.com/9077/jet_143651.mp3';
urls[-4] = 'http://francemaghreb2.ice.infomaniak.ch:80/francemaghreb2-high.mp3';
var next = 0;
</script><!-- player start -->
<a href="#" onclick="playPause()" id="player" title="Play">Play</a>
<a href="#" onclick="playPause()" id="player" title="Stop">Stop</a>
<a href="#" onclick="nextSong()" id="player" title="Next Station">Next Track</a>
<!-- player ends -->
<br>
<br>
<!-- img links start -->
<a href="#" onclick="pickSong(-1)">
<img src="radio/radio almazighia.png" />
</a>
<a href="#" onclick="pickSong(-2)">
<img src="radio/alwatania.png" />
</a>
<a href="#" onclick="pickSong(-3)">
<img src="radio/inter.jpg" />
</a>
<a href="#" onclick="pickSong(-4)">
<img src="radio/france maghrib.jpg" />
</a>
<!-- img links ends -->
答案 0 :(得分：1)
我冒昧地重做你的代码。感谢您的评论，我可以实现您想要的东西。当用户启动无线电台时，它会在播放链接旁边显示无线电台的图像。
我改进了一些东西：
[stream uri, radio station image]。javascript: void(0)中使用#来防止页面跳起来。希望你喜欢它。
function loadPlayer()
{
var audioPlayer = new Audio();
audioPlayer.controls="";
audioPlayer.setAttribute("data-index", -1); //set default index to -1.
audioPlayer.addEventListener('ended',nextSong,false);
audioPlayer.addEventListener('error',errorFallback,true);
document.getElementById("player").appendChild(audioPlayer);
}
function nextSong(index, e)
{
var next;
var audioPlayer = document.getElementsByTagName('audio')[0];
//check for index. If so load from index. If not, index is defined auto iterate to next value.
if (index >= 0)
{
next = index;
}
else
{
next = parseInt(audioPlayer.getAttribute("data-index"))+1;
next >= urls.length ? next = 0 : null;
}
audioPlayer.src=urls[next][0]; //load the url.
audioPlayer.setAttribute("data-index", next);
//disable the player.
var audioPlayerControls = document.getElementById("playerControls");
audioPlayer.removeEventListener('canplay',enablePlayerControls,false);
audioPlayerControls.setAttribute("disabled", true);
audioPlayer.addEventListener('canplay',enablePlayerControls,false);
audioPlayer.load();
//show the image:
var image = document.getElementById("playerList").querySelectorAll("a")[next].querySelector("img").cloneNode();
image.style.width = "30px";
if(audioPlayerControls.querySelector("img"))
{
audioPlayerControls.replaceChild(image, audioPlayerControls.querySelector("img"));
}
else
{
audioPlayerControls.insertBefore(image, audioPlayerControls.querySelector("a"));
}
}
function enablePlayerControls()
{
//File has loaded, so we can start playing the audio.
//Enable the player options.
var audioPlayer = document.getElementsByTagName('audio')[0];
audioPlayer.removeEventListener('canplay',enablePlayerControls,false);
document.getElementById("playerControls").removeAttribute("disabled");
audioPlayer.play();
}
function errorFallback() {
nextSong();
}
function playPause()
{
var audioPlayer = document.getElementsByTagName('audio')[0];
if (audioPlayer.paused)
{
audioPlayer.play();
} else
{
audioPlayer.pause();
}
}
function pickSong(e)
{
//we want the correct target. Select it via the event (e).
var target;
//pickSong does the selecting:
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() == "img")
{
//The event target = the img element.
target = e.target.parentElement;
}
else
{
//the event target is the a element
target = e.target;
}
var index = target.getAttribute("data-index"); //get the song index stored in the data-index attribute.
nextSong(index);
}
var urls = new Array();
urls[0] = ['http://mp3lg4.tdf-cdn.com/9079/jet_143844.mp3', 'radio/radio almazighia.png'];
urls[1] = ['http://mp3lg4.tdf-cdn.com/9077/jet_143651.mp3', "radio/alwatania.png"];
urls[2] = ['http://mp3lg4.tdf-cdn.com/9077/jet_143651.mp3', "radio/inter.jpg"];
urls[3] = ['http://francemaghreb2.ice.infomaniak.ch:80/francemaghreb2-high.mp3', "radio/france maghrib.jpg"];
function startAudioPlayer()
{
loadPlayer();
for (var i = 0; i < urls.length; ++i)
{
//this for loop runs through all urls and appends them to the player list. This smooths the adding off new items. You only have
//to declare them in the array, the script does the rest.
var link = document.createElement("a");
link.href = "javascript: void(0)";
link.addEventListener("click", pickSong, false);
link.setAttribute("data-index", i);
link.img = document.createElement("img");
link.img.src = urls[i][1];
link.appendChild(link.img);
document.getElementById("playerList").appendChild(link);
}
}
//Event that starts the audio player.
window.addEventListener("load", startAudioPlayer, false); #playerControls[disabled=true] > a{
color: #c3c3c3;
}<span id="playerControls" disabled="true">
<a href="javascript: void(0);" onclick="playPause()" id="player" title="Play">Play</a>
<a href="javascript: void(0);" onclick="playPause()" id="player" title="Stop">Stop</a>
</span>
<a href="javascript: void(0);" onclick="nextSong()" id="player" title="Next Station">Next Track</a>
<!-- player ends -->
<br>
<br>
<!-- img links start -->
<div id="playerList">
</div>