Question

我到处寻找我的问题并找到了一些答案，但是当我实施它时似乎没有用。

这是我的简单代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Audio Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

  $(document).ready(function(){
    play_audio();
  });

  $(document).on("click", "#play-btn", function(){
    play_audio();
  });

  function play_audio(){
    var notify = document.getElementById("sound-notification");
    notify.play();
  }

</script>

</head>

<body>

<audio id="sound-notification" src="beep.ogg"></audio>

<button id="play-btn">Play</button>

hello world

</body>
</html>

有两种方法可以在页面加载后以及用户点击按钮时生成音频声音。

在FF和Chrome中一切正常，但在Safari中没有（我有5.1.7版）

我不确定我做错了什么或是什么。

非常感谢任何帮助。

感谢。

Answer 1

您应该使用html5 doctype使页面将其解释为HTML5文档。

<!doctype html>

而不是你曾经使用过的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

更新代码

<script type="text/javascript">

$(function() {
$(document).on("click", "#play-btn", function(){
    play_audio();
  });

  function play_audio(){
    var notify = document.getElementById("sound-notification");
    notify.play();
  }

});

</script>

Answer 2

我终于开始工作了......

<audio id="sound-notification">
  <source scr="beep.ogg" type="audio/ogg"></source>
  <source src="beep.mp3" type="audio/mpeg"></source>
</audio>

希望这对任何人都有帮助。

Answer 3

这对我在Drupal上的所有浏览器中的元素上添加单击声音很有用：

    var snd = new Audio(Drupal.settings["basePath"] + "sites/all/themes/your_theme/click.ogg");
    var sndSafari = new Audio(Drupal.settings["basePath"] + "sites/all/themes/your_theme/click.mp3");

    var is_safari = navigator.userAgent.indexOf("Safari") > -1;

    jQuery('body a').click(function(){
         if(is_safari){
            sndSafari.play();
         }else{
            snd.play();
         }
    });

这是额外的信息，万一有人需要它：

Firefox 3.5+＆gt;＆gt;支持.ogg，.wav

IE9 +＆gt;＆gt;支持.mp3

Chrome 6+＆gt;＆gt;支持.ogg，.mp3，.mp4

Safari 5+＆gt;＆gt;支持.mp3，.mp4，.wav

Opera 10.5+＆gt;＆gt;支持.ogg，.wav

确保正确添加声音路径（我使用的是drupal api）

音频元素在Safari 5.1中不起作用

3 个答案: