在 iPad 上播放音频

Posted 2023-02-25

【中文标题】在 iPad 上播放音频

【英文标题】：Playing audio on iPad

【发布时间】：2011-11-18 08:23:56

【问题描述】：

我正在开发一个为客户提供聊天服务的网站，但是，我们在 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);
    

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

【参考方案1】：

嗯，答案有点明显。

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

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

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

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

【讨论】：

呸，Apple，用户操作正在加载网页，因此需要 两个 用户操作（加载页面，然后执行其他操作）。尝试触发本机键盘时出现同样的问题。

@Tim S：您是说对于给定的网页：一旦用户加载页面然后单击播放按钮，您就可以在该页面上随时播放音频？比如，响应鼠标悬停事件？

如果声音不是由用户事件触发，它就不会播放或预缓存。所以我猜你可以使用悬停事件来播放或加载声音，是的。请不要忘记您不能将鼠标悬停在触摸屏上。

【参考方案2】：

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

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

【参考方案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();
  

【讨论】：

我偶然发现了这个问题并找到了解决它的方法。然后决定发布我用来帮助他人的代码。

【参考方案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

【参考方案5】：

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

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

【讨论】：

不幸的是，两者都不起作用。不过感谢您的回答。

奇数。您是否验证过它可以在桌面浏览器上运行？所以你可以确保音频文件的路径是正确的？

我可以肯定地确认它确实在桌面上工作。还有，如果 iPad 真的打开了，声音，哈哈！

这就是问题所在？ :-) 很高兴你把它整理好了！

我什么都没排序！不幸的是，它仍然无法正常工作......我只是说它适用于台式机而不是 iPad。