尝试在播放音乐时将歌曲描述添加到音频

Question

我希望能够显示歌曲点击时的说明，该歌曲将在歌曲播放期间播放。即当第一首歌曲被点击时，无论我想播放的歌曲的小描述都会在歌曲播放时显示。歌曲结束后，带显示屏的盒子应该消失。

的HTML中的音频文件有：

<audio src="http://mediaplayer.yahoo.com/js" controls id="audioPlayer"> 
    Sorry, your browser doesn't support html5! 
</audio> 
<ul id="playlist"> 
    <li class="current-song"><a href="sounds/Sad%20Mans%20Tongue.mp3"><span class="blacktextbg">Sad Man's Tongue</span></a></li> 
    <li><a href="sounds/breed.mp3"><span class="blacktextbg">Breed</span></a></li> 
    <!--<li><a href="sounds/creep.mp3">Creep</a></li>--> 
    <li><a href="sounds/Everything%20Zen.mp3"><span class="blacktextbg">Everything Zen</span></a></li> 
    <li><a href="sounds/Ain't%20It%20Funky%20Now%20Pt%202.mp3"><span class="blacktextbg">Ain't It Funky Now Pt 2</span></a></li> 
    <!--<li><a href="sounds/once.mp3">Once</a></li>--> 
    <li><a href="sounds/killing all the joy.mp3"><span class="blacktextbg">Killing All The Joy</span></a></li> 
    <!--<li><a href="sounds/torn.mp3">Torn</a></li> 
    <li><a href="sounds/aftermidnight.mp3">After Midnight</a></li>--> 
    <li><a href="sounds/X1BetaOWS.mp3"><span class="blacktextbg">OWS</span></a></li> 
    <li><a href="sounds/X1 Alpha.mp3"><span class="blacktextbg">X1 Alpha</span></a></li> 
    <!--<li><a href="sounds/undome.mp3">Undo Me</a></li>--> 
    <li><a href="sounds/Low%20.mp3"><span class="blacktextbg">Low</span></a></li> 
    <!--<li><a href="sounds/Cumbersome.mp3">Cumbersome</a></li> 
    <li><a href="sounds/Thru%20Your%20Window%20.mp3">Thru Your Window</a></li>--> 
    <li><a href="sounds/Reconsider%20Baby.mp3"><span class="blacktextbg">Reconsider Baby</span></a></li> 
    <li><a href="sounds/4lee.mp3"><span class="blacktextbg">4LEE</span></a></li> 
    <li><a href="sounds/show%20biz%20kids.mp3"><span class="blacktextbg">Show Biz Kids</span></a></li> 
    <!--<li><a href="sounds/show%20biz%20guitar.mp3">Show Biz Guitar</a></li> 
    <li><a href="sounds/Voodoo%20Child.mp3">Voodoo Child</a></li> 
    <li><a href="sounds/saveme.mp3">Save Me</a></li>--> 

</ul> 
<script src="https://code.jquery.com/jquery-2.2.0.js"></script> 
<script src="audioPlayer.js"></script> 
<script> 
    audioPlayer(); 
</script> 

我使用的是audioplayer.js：

function audioPlayer(){ 
     var currentSong = 0; 
     $("#audioPlayer")[0].src = $("#playlist li a")[0]; 
     $("#playlist li a").click(function(e){ 
      e.preventDefault(); 
      $("#audioPlayer")[0].src = this; 
      $("#audioPlayer")[0].play(); 
      $("#playlist li").removeClass("current-song"); 
      currentSong = $(this).parent().index(); 
      $(this).parent().addClass("current-song"); 
     }); 

     $("#audioPlayer")[0].addEventListener("ended", function(){ 
      currentSong++; 
      if(currentSong == $("#playlist li a").length) 
       currentSong = 0; 
      $("#playlist li").removeClass("current-song"); 
      $("#playlist li:eq("+currentSong+")").addClass("current-song"); 
      $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href; 
      $("#audioPlayer")[0].play; 
     }); 
    }// JavaScript Document 

我认为解决这个问题将有包含在事物的方式audioplayer.js文件添加当前歌曲类时，尽管我不知道如何去做。谢谢！

Answer 1

假设您的每首歌曲的详细信息都已准备好，您可以修改audioPlayer.js以显示特定于当前歌曲的信息。

CSS 
.song-info { 
    display:none; // hidden by default 
} 

HTML 
<div id="song-info"> 
    Nothing playing. 
</div> 

JS 
let currentDescription = descriptions[currentSong] 
$('#song-info').css('display', 'inline'); 
$('#song-info').text(currentDescription); 

在上面的JS它假定“描述”是手柄地图一首歌描述的，匹配audioPlayer.js引用的歌曲阵列的指数（粉饰如何以及在哪里你会得到这样的地图）。它检索当前歌曲的描述文本并修改'＃song-info'div的内容。您需要将这些行包含在audioPlayer.js文件中currentSong被分配新值的地方。