在 iPad 上播放音频

Question

我正在开发一个为客户提供聊天服务的网站，但是，我们在 iPad (iOS 5) 中遇到了音频问题。

目标其实是支持IE7的iPad是首选。

我已经尝试了这些方法：

HTML5

<audio id="notification" preload="auto">
    <source src="audio/notification.ogg" type="audio/ogg" />
    <source src="audio/notification.mp3" type="audio/mpeg" />
</audio>

使用一些 javascript

var el = document.getElementById('notification');
el.play();

---

一些 javascript 函数 我偷了某个地方，实际上是一个函数中的两种不同方法。请注意脚本在子目录中，所以路径是正确的。

function notify() {
    var url = '../audio/notification.mp3';
    var a = document.createElement('audio');

    if(!!(a.canPlayType && a.canPlayType('audio/mpeg').replace(/no/, ''))) {
        var sound = new Audio(url);
        sound.load();
        sound.play();
    } else {
        $('#notification').remove();
        var sound = $('<embed id="notification" type="audio/mpeg" src="'+url+'" loop="false" hidden="true" autostart="true" />');
        $(body).append(sound);
    }
}

这两种方法似乎都不起作用。我做错了吗？

Answer 1

嗯，答案有点明显。

在花费大量时间进行研究等之后，我在 Safari 的官方文档中找到了an article：

在 iOS 上的 Safari（适用于所有设备，包括 iPad）中，用户可能在蜂窝网络上并按数据单位收费，因此禁用了预加载和自动播放。在用户启动数据之前不会加载数据。这意味着 JavaScript play() 和 load() 方法在用户开始播放之前也是不活动的，除非用户操作触发了 play() 或 load() 方法。换句话说，用户启动的播放按钮有效，但 onLoad="play()" 事件无效。

因此，基本上，如果没有用户首先触发它，您就无法启动声音。作为解决方案，我创建了一个默认关闭的静音按钮，因此您必须单击它来播放通知声音。之后我可以使用 Javascript 播放声音而无需用户交互。

感谢 Safari 带来美好的未来。非常感谢。

Answer 2

随着 iOS 6 for iPad 的发布，iPad 仍然不支持在 onLoad 期间播放音频。

对于配备 iOS 6 的 iPhone，只有在 iPhone 的音频插孔中插入耳机时，才会在 html 网站的 onLoad 期间播放。

Answer 3

Apple iPad 不允许在没有用户点击之前启动它的情况下播放声音。

解决方案：添加播放/暂停按钮。

App.toggle_audio = function(elem) {
  var icon = elem.find("i");
  var playing = _.include(icon.attr('class').split(" "), "icon-pause")
  if (playing) {
    elem.html("<i class='icon-play'></i> " + App.translate_play_audio);
    App.play_audio_toggle = false;
  } else {
    App.audio_file.load();
    elem.html("<i class='icon-pause'></i> " + App.translate_pause_audio);
    App.play_audio_toggle = true;
  }
}

一旦加载音频后用户单击按钮。然后你可以通过 Javascript 播放它。

  if (App.play_audio_toggle) {
    App.audio_file.play();
  }

Answer 4

源码（简单版）

HTML

 <div id="enableSound"> Enable Sound</div>

JS

var sound = new Audio("/Assets/audio/yourAudio.mp3");;
 $("#enableSound").click(function() {
     sound.play();
  });

用户必须点击 div "#enableSound"，从那一刻起，只要您想播放上述声音，只需调用

sound.play()

http://jsbin.com/virixukavo/1/edit?html,js,output

Answer 5

尝试将 MP3 作为第一个来源而不是第二个来源。 iPad 曾经有一个问题，即无论如何它总是播放第一个源（虽然它现在可能已经修复 - 但值得一试）。

还可以尝试将type 更改为audio/mp3。