Question

我有一个javascript代码可以在点击时启动声音。它适用于chrome，但在Firefox上它启动onload，但我也希望它也可以在那里点击。

有人可以帮忙吗？

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

Answer 1

试试这个

  <!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="http://dev.interactive-creation-works.net/1/1.ogg" ></audio>
 </body>
 </html>

Answer 2

有效

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

Answer 3

现在Web Audio API已经到了browser support，这可能是一个更强大的选择。

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

Answer 4

JavaScript

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

HTML

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

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

Answer 5

尽管有几个相似的答案，但我仍然遇到一个问题-用户会多次单击按钮，在其自身上播放音频（它是偶然被点击的，或者只是在“播放”...。）

一个简单的解决方法：

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

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

Answer 6

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

Javascript Audio点击播放

6 个答案: