我有一个带有多首歌曲的音频播放器。对于每首歌曲，我想在下面显示一个 div，其中包含该特定歌曲的歌词，同时隐藏所有其他歌曲的歌词。
这是音频播放器的脚本，有效:
initAudio($('#playlist li:first-child'));
function initAudio(element){
var song = element.attr('song');
var title = element.text();
var cover = element.attr('cover');
var artist = element.attr('artist');
var album = element.attr('album');
//Create audio object
audio = new Audio('public/songs/'+ song);
//Insert audio info
$('.artist').text(artist);
$('.title').text(title);
$('.album').text(album);
//Insert song cover
$('img.cover').attr('src','public/images/' + cover);
$('#playlist li').removeClass('active');
element.addClass('active');
// Set timer to 0
$('#duration').html('0:00');
// Maintain volume on song change
audio.volume = $('#volume').val() / 100;
}
这是播放列表和歌词 HTML 的简化版本:
<ul id="playlist">
<li class="song-list active" song="song-1.wav" data-id="song-1"></li>
<li class="song-list" song="song-2.wav" data-id="song-2"></li>
<li class="song-list" song="song-3.wav" data-id="song-3"></li>
</ul>
<div id="song-1" class="lyrics">Lyrics to song 1</div>
<div id="song-2" class="lyrics">Lyrics to song 2</div>
<div id="song-3" class="lyrics">Lyrics to song 3</div>
我尝试了很多方法，但都无济于事。我什至不确定如何定位播放的每首歌曲以提取 data-attribute。
有什么想法吗？
最佳答案
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Song List Sample</title>
<script type="text/javascript" language="javascript" src="./scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" language="javascript">
var audio = null;
function initAudio(songElem)
{
var songID = null;
var title = null;
var metaID = null;
var songFile = null;
var cover = null;
var artist = null;
var album = null;
try
{
// Retrieve song Title and meta-data identifier
songID = "#" + songElem.getAttribute("id");
title = $(songID).text();
metaID = "#" + $(songID).attr('data-id');
// Get selected song data
songFile = $(metaID).attr('song');
cover = $(metaID).attr('cover');
artist = $(metaID).attr('artist');
album = $(metaID).attr('album');
// Update summary to be displayed
$("#currentTitle").text(title);
$("#currentAlbum").text(album);
$("#currentArtist").text(artist);
$("#currentCover img").attr("src", cover);
// Hide and display applicable song data
$(".songmeta").hide();
$("#currentSong").show();
$(metaID).show();
// Create or update audio object
if (audio != null) audio.src = songFile;
else audio = new Audio(songFile);
audio.play();
// Update current song selection
$(".songlist").attr("active", "false");
$(songID).attr("active", "true");
}
catch (e)
{
alert("initAudio Error: " + e.Message);
}
finally
{
}
}
</script>
</head>
<body>
<ul id="playlist">
<li id="s1" class="song-list" onclick="initAudio(this)" active="false" data-id="song-1">Song One</li>
<li id="s2" class="song-list" onclick="initAudio(this)" active="false" data-id="song-2">Song Two</li>
<li id="s3" class="song-list" onclick="initAudio(this)" active="false" data-id="song-3">Song Three</li>
</ul>
<div id="currentSong" >
<table border="1">
<tr>
<td>
<table border="1">
<tr><td><b>Song</b></td><td id="currentTitle"></td></tr>
<tr><td><b>Album</b></td><td id="currentAlbum"></td></tr>
<tr><td><b>Artist</b></td><td id="currentArtist"></td></tr>
</table>
</td>
<td id="currentCover"><img alt="" src="" /></td>
</tr>
</table>
</div>
<div id="song-1" class="songmeta" artist="Song 1 Artist" album="Song 1 Album" cover="./images/Album1.jpeg" song="./songs/Song1.mp3" >Lyrics to song 1</div>
<div id="song-2" class="songmeta" artist="Song 2 Artist" album="Song 2 Album" cover="./images/Album2.jpeg" song="./songs/Song2.mp3" >Lyrics to song 2</div>
<div id="song-3" class="songmeta" artist="Song 3 Artist" album="Song 3 Album" cover="./images/Album3.jpeg" song="./songs/Song3.mp3" >Lyrics to song 3</div>
<script type="text/javascript" language="javascript">
// Initialization
$(".songmeta").hide();
$("#currentSong").hide();
</script>
</body>
</html>
关于javascript - 使用通过自定义数据属性检索的选择器在音频播放时显示目标 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46737864/