Html 在 iPad 上播放音频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8179585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Playing audio on iPad
提问by Tim S.
I'm working on a website that has a chat for a client, however, we're experiencing problems with audio in iPad (iOS 5).
我正在开发一个与客户聊天的网站，但是，我们在 iPad (iOS 5) 中遇到了音频问题。
The target is in fact the iPad with support for IE7 is preferred.
目标实际上是支持 IE7 的 iPad 是首选。
I've tried these approaches:
我试过这些方法：
HTML5
HTML5
<audio id="notification" preload="auto">
<source src="audio/notification.ogg" type="audio/ogg" />
<source src="audio/notification.mp3" type="audio/mpeg" />
</audio>
With some javascript
使用一些 javascript
var el = document.getElementById('notification');
el.play();
Some javascript functionI stole somewhere which in fact are two different methods in one function. Please note the script is in a subdir, so the path is correct.
我从某处偷来的一些 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);
}
}
Both methods doesn't seem to work. Am I doing something wrong?
这两种方法似乎都不起作用。难道我做错了什么？
回答by Tim S.
Well, the answer was somewhat obvious.
嗯，答案有点明显。
After a lot of time spending doing research etc, I've found an articlein the official documentation of Safari saying:
经过大量时间进行研究等后，我在 Safari 的官方文档中发现了一篇文章：
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
在 iOS 上的 Safari（适用于所有设备，包括 iPad）中，用户可能使用蜂窝网络并按数据单位收费，预加载和自动播放被禁用。在用户启动之前不会加载任何数据。这意味着 JavaScript play() 和 load() 方法在用户启动播放之前也处于非活动状态，除非 play() 或 load() 方法由用户操作触发。换句话说，用户启动的播放按钮有效，但 onLoad="play()" 事件无效。
So, basically, you can't launch a sound without the user triggering it at first. As solution I created a mute button that is off on default, so you have to click it which plays the notification sound. Afterwards I can use Javascript to play the sound without user interaction.
所以，基本上，你不能在没有用户触发的情况下启动声音。作为解决方案，我创建了一个默认关闭的静音按钮，因此您必须单击它来播放通知声音。之后我可以使用 Javascript 在没有用户交互的情况下播放声音。
Thank you Safari for this great future. Thanks a lot.
感谢 Safari 的美好未来。非常感谢。
回答by Jeremiah Isaacson
With the release of iOS 6 for iPad audio playing during an onLoad is still not supported for iPad.
随着 iOS 6 的发布，iPad 仍然不支持在加载期间播放音频。
For iPhones with iOS 6 audio will only play during an html site's onLoad if there are headphones plugged into the audio Hyman on the iPhone.
对于带有 iOS 6 的 iPhone，如果耳机插入 iPhone 的音频插孔，则音频只会在 html 站点的 onLoad 期间播放。
回答by Hendrik
The Apple iPad does not allow playing sounds without a user click previously initiating it.
Apple iPad 不允许在没有用户点击之前播放声音。
Solution: Add a play/pause button.
解决方案：添加播放/暂停按钮。
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;
}
}
Once the user clicked the button once the Audio is loaded. You can then play it via Javascript.
一旦用户在加载音频后单击按钮。然后您可以通过 Javascript 播放它。
if (App.play_audio_toggle) {
App.audio_file.play();
}
回答by Chris Phan
Source code(version simple)
源代码（简单版）
HTML
HTML
<div id="enableSound"> Enable Sound</div>
JS
JS
var sound = new Audio("/Assets/audio/yourAudio.mp3");;
$("#enableSound").click(function() {
sound.play();
});
User has to click on div "#enableSound", from that moment on whenever you want to play above sound, just call
用户必须点击 div "#enableSound"，从那一刻起，只要你想在声音上方播放，只需调用
sound.play()
回答by Ian Devlin
Try putting the MP3 as the first source rather than the second one. The iPad used to have an issue where it always played the first source no matter what (it might have been fixed by now though - but it's worth a try).
尝试将 MP3 作为第一个来源而不是第二个来源。iPad 曾经有一个问题，不管怎样，它总是播放第一个源（虽然现在可能已经修复了 - 但值得一试）。
Also try changing the typeto audio/mp3.
也尝试将 更改type为audio/mp3。
