Question

我目前正在使用HTML5音频功能API构建音乐播放器，并且在开始对播放器的音频功能进行编码之前，我想使用getElementbyID和onClick函数在单独的位置显示结果div个类别或ID。
我想使用附加到链接或按钮的嵌入式HTML元数据之类的东西，这些元数据将在单独的div容器中显示元数据。

例如：

<button src="mysong.mp3" artist="artist" title="name of the song"
 album="name of album" cover="albumcover.jpg" onClick="load metadata and play music"
>

每个部分都有自己的div，用于显示被单击的链接/按钮中的元数据。

所以输出将是这样的：

<div class="wrapper">
  <div id="cover"></div>
  <div id="artist"></div>
  <div id="title"></div>
  <div id="album"></div>
  <div id="html5 audio controllers"></div>
  <div class="googleads"></div>
</div>

我是编码的新手，我通过示例学习得更好。那么有人可以帮忙吗？从字面上看，这是我的PWA的最后一个加载对象。

Answer 1

您可以执行以下操作：

function addSong (song) {
  if (song && song.dataset) {
    const { src, artist, title, album, cover } = song.dataset;
    document.getElementById("cover").innerHTML = cover;
    document.getElementById("artist").innerHTML = artist;
    document.getElementById("title").innerHTML = title;
    document.getElementById("album").innerHTML = album;
  }
}

<button data-src="mysong.mp3" data-artist="artist" data-title="name of the song" data-album="name of album" data-cover="albumcover.jpg" onClick="addSong(this);">Add Song</button>

<div id="metadata">
  <div id="cover"></div>
  <div id="artist"></div>
  <div id="title"></div>
  <div id="album"></div>
  <div id="html5-audio-controllers"></div>
  <div class="googleads"></div>
</div>

我在这里所做的就是使用按钮的data属性来传递将用于填充元数据容器的信息。从语义上讲，这是将信息放入按钮元素本身的推荐方法。或者，您可以将JSON对象传递给onClick处理程序，在这种情况下，您不需要数据属性。

我也更改了音频控制器的ID，因为您不想在其中使用空格。

getElementbyID，用于加载音乐播放器数据

1 个答案: