如何在不打开新标签的情况下播放音频文件

Question

我想在我的所有 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 = "▶";
  
  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);
}

Answer 1

<div> 
    <audio id="myaudio" src="https://www.hostname.com/wp-content/uploads/2020/09/bird_sound.wav" controls="controls"  preload="auto" hidden="true"></audio>
    <input type="button" onclick="autoPlay()" value="Play"/>
</div>

<script language="javascript" type="text/javascript">
        var myAuto = document.getElementById('myaudio');
        function autoPlay(){
            myAuto.play();
        }
</script>