使用 HTML-CSS-JS 在触摸事件上播放 MP3

Question

谁能帮我找到一种方法，通过使用 HTML-CSS-JavaScript 触摸触摸屏上的图像来播放 mp3 音频文件？

谢谢！

Answer 1

要播放 HTML 中的音频文件，请使用 <audio></audio> 标签。
此标签还带有 <audio controls> 属性，用于添加播放暂停等控件。
有关此标签的完整 DOM 文档，请访问 W3 audio tag docs
至于 JS 端，使用 onclick() 事件触发触摸音频文件。

Answer 2

在您的 html 中创建音频元素并使用 visibility: hidden 隐藏它。

当用户点击图像时，使用 Javascript 处理点击事件并从处理程序手动触发音频元素上的播放。

您可以在 audio html api 上参考 here for more documentation。

Answer 3

<!DOCTYPE HTML>
  <html>
  <head>
  <title>audio with image</title>
  </head>
  <body>

    <script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
                 }
   </script>

<img src="http://www.partyplan123.com/wp-content/uploads/2015/02/click-here.jpg" onclick="play()">
<audio id="audio" src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" ></audio>
 </body>
 </html>

Answer 4

这是最好的方法。这不是内联 Javascript，因此符合内容安全策略 (CSP)，因此如果您移植到 android .apk 或 Chromium 应用程序，您将不会遇到问题。这显然不是我的代码，它来自 teamtreehouse 上的 Steven Park：第一种方式使用 Jquery:

const rollSound = new Audio("./assets/audio/ONEDICE.WAV");
    $('#dice-button').click(e => rollSound.play());

创建一个带有#div-按钮名称的div，另一个例子是一个不是JQuery的版本：

const rollSound = new Audio("./assets/audio/ONEDICE.WAV");
    document.getElementById('dice-button').addEventListener("click", e => 
    rollSound.play());

您可以在这里找到它： https://teamtreehouse.com/community/how-do-i-add-a-sound-when-a-button-is-clicked-jquery

但是我剪切并粘贴了它，因为在搜索满足我需求的内容后我花了几个小时才找到该解决方案。

使用 HTML-CSS-JS 在触摸事件上播放 MP3

Play MP3 on touch event with HTML-CSS-JS

javascript

mp3

touch-event