在iPad上播放音频

时间:2011-11-18 08:23:56

标签: ipad html5 audio

我正在开设一个与客户聊天的网站,但是,我们在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);
    }
}

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

5 个答案:

答案 0 :(得分:25)

嗯,答案有点明显。

经过大量时间进行研究等,我在Safari的官方文档中发现an article说:

  

在iOS上的Safari(适用于所有设备,包括iPad)中,用户可能位于蜂窝网络上并按数据单元收费,因此会禁用预加载和自动播放。在用户启动数据之前不会加载任何数据。这意味着JavaScript play()和load()方法在用户启动回放之前也处于非活动状态,除非用户操作触发play()或load()方法。换句话说,用户启动的播放按钮有效,但onLoad =“play()”事件不起作用。

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

感谢Safari的这个美好未来。非常感谢。

答案 1 :(得分:6)

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

对于使用iOS 6的iPhone,只有在iPhone上的音频插孔中插入耳机时才会在html网站的onLoad中播放音频。

答案 2 :(得分:4)

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

答案 3 :(得分:0)

源代码(版本简单)

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

答案 4 :(得分:-1)

尝试将MP3作为第一个源而不是第二个源。 iPad曾经有一个问题,无论如何它总是扮演第一个来源(虽然现在可能已经解决了 - 但是值得一试)。

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