Javascript 音频点击播放答案

【问题标题】：Javascript Audio Play on clickJavascript 音频点击播放
【发布时间】：2013-09-20 11:49:18
【问题描述】：

我有一个 JavaScript 代码可以在点击时播放声音。它可以在 Chrome 上运行，但在 Firefox 上它会在加载时启动。

谁能帮忙？

<script>
var audio = new Audio("http://music.ogg");

audio.oncanplaythrough = function(){
audio.play();
}

audio.loop = true;

audio.onended = function(){
audio.play();
}

</script>

<input type="image" src="http://button.png" onclick="audio.play()">

【问题讨论】：

标签： javascript audio onclick

【解决方案1】：

你可以在两行中做到这一点

HTML

<button onclick="playSound()">Play</button>

JS

let playSound = () => new Audio("link").play()

【讨论】：

【解决方案2】：

试试下面的代码sn-p

<!doctype html>
<html>
  <head>
    <title>Audio</title>
  </head>
  <body>

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

    <input type="button" value="PLAY" onclick="play()">
    <audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>

  </body>
</html>

【讨论】：

您好，感谢您的回复。它现在在两个浏览器上都没有声音。这里是链接dev.interactive-creation-works.net/1/index.php
我用新的音频文件更新了你的答案。

【解决方案3】：

HTML：

<button onclick="play()">Play File</button>
<audio id="audio" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio>

JavaScript：

let play = function(){document.getElementById("audio").play()}

【讨论】：

【解决方案4】：

虽然有几个答案相似，但我仍然遇到一个问题 - 用户会多次单击按钮，播放音频（可能是意外单击，或者他们只是在“播放”......）

一个简单的解决方法：

var music = new Audio();
function playMusic(file) {
    music.pause();
    music = new Audio(file);
    music.play();
}

在加载时设置音频允许在每次调用函数时暂停“音乐” - 即使用户多次单击按钮，也可以有效地停止“噪音”（也无需关闭按钮，但为了用户体验，这可能是您想要做的事情）。

【讨论】：

【解决方案5】：

JavaScript

function playAudio(url) {
  new Audio(url).play();
}

HTML

<img src="image.png" onclick="playAudio('mysound.mp3')">

在大多数现代浏览器中都受支持，并且易于嵌入到 HTML 元素中。

【讨论】：

如果有人遇到延迟，只需在页面加载时使用var audio = new Audio(url); 一次。然后由audio.currentTime = 0; audio.play();触发。只有在短时间播放声音时才需要重置当前时间
是否需要垃圾收集？如果我重复数千次，是否会发生内存泄漏？

【解决方案6】：

现在Web Audio API 已经出现并获得browser support，这可能是一个更强大的选择。

Zounds 是围绕该 API 的原始包装器，用于播放简单的一次性声音，在使用点使用最少的样板。

【讨论】：

【解决方案7】：

成功了

<audio src="${ song.url }" id="audio"></audio>
<i class="glyphicon glyphicon-play-circle b-play" id="play" onclick="play()"></i>

<script>
    function play() {
        var audio = document.getElementById('audio');
        if (audio.paused) {
            audio.play();
            $('#play').removeClass('glyphicon-play-circle')
            $('#play').addClass('glyphicon-pause')
        }else{
            audio.pause();
            audio.currentTime = 0
            $('#play').addClass('glyphicon-play-circle')
            $('#play').removeClass('glyphicon-pause')
        }
    }
</script>

【讨论】：