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

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

我改进了一些东西：

不再有全局变量
加载页面时加载脚本和音频播放器
启动时禁用播放和停止。
加载文件时，通过事件触发播放事件。这意味着 file/stream 必须加载足够的音频元素才能播放。当这有效时，控件将被启用。
选择时显示电台图像。
当用户选择电台时开始播放。
添加新电台就是简单地向数组中添加一个新项目。项目已添加到项目 [stream uri, radio station image].
在 link 的 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>

JavaScript 音频多轨播放器

JavaScript audio multi track player

html

javascript

audio

playlist