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的发布，在onLoad期间播放的音频仍然不支持iPad。

对于使用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。

在iPad上播放音频

5 个答案:

HTML

JS