如何在不打开新选项卡的情况下播放音频文件

问题描述

我想在我所有的wordpress 页面上实现音频播放器，因此我需要使用JS创建HTML元素并从那里进行操作。一切正常，除了按下播放按钮时，它会将我重定向到带有音频链接的新页面并在其中播放。我想避免这种情况，以便我可以在WP页面本身上播放和停止它，并在后台播放音频。

任何提示都将不胜感激！

function addAudioPlayer() {

  const audioPlayer = document.createElement("a");
  audioPlayer.setAttribute("id","audioPlayer");
  audioPlayer.href =
    "https://www.hostname.com/wp-content/uploads/2020/09/bird_sound.wav";
  audioPlayer.setAttribute("data-id","[data-song]");
  audioPlayer.innerHTML = "&#9654;";
  
  Array.prototype.forEach.call(
    document.querySelectorAll("[data-song]"),function (song) {

      song.audio = new Audio(song.href);
      
      song.setAttribute("role","button");
      song.setAttribute("aria-pressed","false");
    }
  );
  document.addEventListener("click",function (event) {

      if (!event.target.hasAttribute("data-song")) return;

      event.preventDefault();

      if (event.target.getAttribute("aria-pressed") == "true") {
        event.target.audio.pause();
        event.target.setAttribute("aria-pressed","false");
        return;
      }
      event.target.audio.play();
      event.target.setAttribute("aria-pressed","true");
    },false
  );
  document.body.appendChild(audioPlayer);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

audio javascript preventdefault wordpress