点击播放JavaScript音频

Question

点击播放JavaScript音频

71

我有一段 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()">

- dA_uNknOwN

7个回答

32

JavaScript

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

HTML

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

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

- user7090116

8

如果有人经历了延迟，只需在页面加载时使用 var audio = new Audio(url); 一次。然后通过 audio.currentTime = 0; audio.play(); 触发它。仅当声音以短脉冲形式播放时才需要重置当前时间。 - williamsi

1

有必要进行垃圾回收吗？如果我重复执行数千次，会出现内存泄漏吗？ - Bitterblue

6

那个有效了

<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>

- Alex Karahanidi

4

您可以用两行代码实现该功能。

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

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

- Ahmad Moghazi

3

现在Web Audio API已经到来并且受到浏览器支持，这可能是一个更加强大的选项。 Zounds是该API的基本封装，用于在使用点上以最少的样板文件播放简单的单发声音。

- Dave Elton

3

虽然有几个答案相似，但我仍然遇到了一个问题——用户会多次点击按钮，导致音频重复播放（可能是误操作或者他们只是“玩”...）。

一个简单的解决方法：

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

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

- Apps-n-Add-Ons

1

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()}

- fruitloaf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arunkumar · Accepted Answer

请尝试下面的代码片段

<!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>