Question

有时当检测到错误时，我希望我的页面播放声音。我做了这个javascript，它不起作用：

function playsound(){
    var obj = document.createElement("audio");
    obj.setAttribute("src", "click.mp3");
    obj.play();
}

if($('#noerrors').css('display') != 'none' ) {
    playsound();

}

为什么不呢？

我想调用playsound（）;只要它让我高兴。

使用时：

if($('#noerrors').css('display') != 'none' ) {
    var obj = document.createElement("audio");
    obj.setAttribute("src", "click.mp3");
    obj.play();

}

工作正常。第一个脚本的问题是什么？

Answer 1

http://jsfiddle.net/3Camg/

<div id="error_sound"></div>
<span class="click">Test Sound by clicking here</span>

function play_sound()
{
  $('#error_sound').html('<audio src="http://www.intriguing.com/mp/_sounds/hg/dead.wav" id="err_player"></audio>');
  document.getElementById('err_player').play();
}

$('.click').bind('click',play_sound);

你不能在jQuery元素上调用play，而是在它下面的HTML元素。

Answer 2

我可以建议你另一个解决方案吗？

在开头只定义一次<audio>，然后选择该标记来调用play()：

1.可以随时插入，例如在<body>的末尾。

<audio id="myAudio" src="click.mp3"></audio>

2.然后如果您有错误，请播放或以其他方式暂停：

if($('#noerrors').css('display') != 'none' ) {
   document.getElementById("myAudio").play();
} else {
   document.getElementById("myAudio").pause();
   document.getElementById("myAudio").currentTime = 0;
}

Answer 3

我建议使用此解决方案（DEMO）：

function playsound(){
    var $audioElement = $("<audio id='audioId'/>");
    $audioElement.attr('src', "click.mp3");
    $audioElement[0].load();
    $audioElement[0].play();
}

if($('#noerrors').css('display') != 'none' ) {
    playsound();
}

确保在加载后播放：

$audioElement.on('canplay canplaythrough', function(){
     $audioElement[0].play();
});

如何创建播放声音功能

3 个答案: