Question

我在asp.net上创建了一个页面，其中包含40首音频歌曲和精心设计的音频播放器的无序列表。我需要一个jQuery函数，当我点击任何列表项时，音频播放器应该更新自己并改变音轨。

 <ul class="rounded-list">
    <li class="audioList">List item</li>
    <li class="audioList">List item</li>
    <li class="audioList">List item</li>
    <li class="audioList">List item</li>
    <li class="audioList">List item</li>
    <li class="audioList">List item</li>
</ul>



<div id="audio-player-div" class="audio-width">
    <audio preload="auto" class="audio-player">
                <source src="Audio/BlueDucks_FourFlossFiveSix.mp3" />
                <source src="Audio/BlueDucks_FourFlossFiveSix.wab" />
                <source src="Audio/BlueDucks_FourFlossFiveSix.ogg" />
    </audio>
</div>

我有这个音轨列表，需要更新音轨，当我点击任何一个列表项时，它应该添加轨道的扩展名及其自身。

Answer 1

编辑：基于更新的问题

HTML：

<ul class="rounded-list">
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix1">1</li>
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix2">2</li>
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix3">3</li>
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix4">4</li>
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix5">5</li>
    <li class="audioList" data-track="Audio/BlueDucks_FourFlossFiveSix6">6</li>
</ul>



<div id="audio-player-div" class="audio-width">
    <audio preload="auto" class="audio-player"></audio>
</div>

jQuery的：

$('li').click(function() {
    var trackName = $(this).data('track');
    $('.audio-player').empty();
    $('.audio-player').append('<source src="'+ trackName +'.mp3" />');
    $('.audio-player').append('<source src="'+ trackName +'.wab" />');
    $('.audio-player').append('<source src="'+ trackName +'.ogg" />');
});

单击新曲目时使用jQuery Update Audio Player

1 个答案: