时间戳

首页 > 解决方案 > getElementbyID 用于加载音乐播放器数据

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

问题描述

我目前正在构建一个带有 HTML5 音频功能 API 的音乐播放器，在我开始编写我想使用的播放器的音频功能之前，我可以getElementbyID按类或 IDonClick在单独的 s 中显示结果。 我想使用附加到链接或按钮的内联 HTML 元数据之类的东西，它将在单独的容器中显示元数据。div
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 的最后一个加载对象。

标签： javascriptjqueryhtml

解决方案

你可以这样做：

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>

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

我还更改了音频控制器的 ID，因为您不想在那里使用空格。

推荐阅读