JavaScript 音频多轨播放器

Question

我对此很陌生，我希望有人可以帮助我完成这段 JavaScript 代码，使其能够提取所提供的音频链接的 img。

就像现在的播放、暂停和下一首歌曲一样

完整代码如下:

</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 -->

Answer 1

我冒昧地修改了你的代码。感谢您的评论，我可以实现您想要的东西。当用户启动广播电台时，它会在播放链接旁边显示广播电台的图像。

我改进了一些东西:

• 不再有全局变量
• 页面加载时加载脚本和音频播放器
• 启动时禁用播放和停止。
• 加载文件时，将通过事件触发播放事件。这意味着文件/流必须被充分加载才能播放音频元素。当此有效时，控件将启用。
• 在选择时显示广播电台的图像。
• 当用户选择广播电台时开始播放。
• 添加新广播电台只需向数组中添加一个新项目即可。项目添加了一个 with 到项目[stream uri, radio station image]。
• 在链接的 href 中使用 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>