Question

我正在尝试在单个html页面上播放多个本地存储的mp3文件。我想在触发onclick的单独js文件中使用单个JavaScript函数，以播放相邻音频标签中引用的正确文件。每次点击/单击音频只需播放一次。

我尝试使用querySelector和其他各种技术来查找最近的音频标签，但是它始终默认为页面顶部的音频标签。如何限制querySelect的范围，或者有另一种方法可以做我想要的？我不想为每个音频标签创建一个唯一的ID，因为我正在制作很多这样的页面。

function PlaySound() {
  var sound = document.querySelector(".audio");
  sound.play()
}

<audio class="audio" src="../../audio/na.mp3" autostart="false"></audio><a onclick="PlaySound()">나</a>

<audio class="audio" src="../../audio/gak.mp3" autostart="false"></audio><a onclick="PlaySound()">각</a>

Answer 1

首先，您应该使用button，而不是锚标记。它们是按钮，因为它们仅在页面上执行操作。链接可以带您进入另一个页面。

现在要解决的问题：调用事件侦听器时，例如PlaySound发生时的onclick，您可以给它一个this参数，它是按钮。

现在，您的音频就很容易previousElementSibling了，这意味着您可以轻松调用audio.play()。

function play (button) {
  console.log('Button:', button.innerText)
  const audio = button.previousElementSibling
  console.log('Audio', audio)
}

<audio src="1"></audio>
<button onclick="play(this)">1</button>

<audio src="2"></audio>
<button onclick="play(this)">2</button>

Answer 2

您可以做的是将音频标签保存的信息存储在JavaScript from django.urls import path from . import views from django.conf.urls import url urlpatterns=[ path('',views.BlogsList.as_view(),name='blog-home'), url(r'^like/$', views.like_post, name='like_post') ]中，并动态创建音频列表和相应按钮。

array

var audioList = [{
  src: "../../audio/na.mp3",
  text: "나"
}, {
  src: "../../audio/gak.mp3",
  text: "각"
}];

var container = document.querySelector("#container");

audioList.forEach(function(audio) {
  var audioElem = document.createElement("audio");
  var button = document.createElement("button");
  audioElem.setAttribute("autostart", false);
  audioElem.setAttribute("src", audio.src);
  button.textContent = audio.text;
  audioElem.className = "audio";
  button.addEventListener("click", getButtonListener(audioElem));
  container.appendChild(audioElem);
  container.appendChild(button);
});

function getButtonListener(audioElem) {
  return function() {
    audioElem.play();
    console.log("Playing:" + audioElem.src);
  };
}

或者您可以这样做：

<div id="container"></div>

var audioList = {
  "나": "../../audio/na.mp3",
  "각": "../../audio/gak.mp3"
};

function openAudio(target){
 document.querySelector("audio[src='" + audioList[target.textContent] + "']").play();
 console.log("Playing: " + audioList[target.textContent]);
}

从最近的音频标签调用src到没有ID的javscript函数

2 个答案: