javascript - 尝试在播放时向音频添加歌曲描述

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 的内容。在为 currentSong 分配新值的任何地方，您都希望在 audioPlayer.js 文件中包含这些行。