HTML5 音频 - 为什么不能在 iOS 上工作?(不涉及自动播放) [英] HTML5 Audio - Why not working on iOS? (NO autoplay involved)
问题描述
我构建了一个简单的演示应用程序来测试 HTML5-Audio.当您触摸或单击机器人的头部时，Web 应用程序说eins"，这是德语中的一"(我的计算机上有此声音文件用于测试).
您可以在此处测试演示应用程序:http://jstesproject.cwsurf.de/
(备注:机器人是phonegap图标，但不涉及phonegap或cordova技术.它是纯HTML5，Javascript(+jQuery)和CSS.另外，你手动点击了机器人的头部，所以不涉及自动启动.)
Web 应用程序在桌面浏览器(我测试了 Chrome 和 Firefox)和 Android 原生浏览器(我用 Android 4.0 测试)上运行良好.但是，我无法让它在 iOS(iPhone，Chrome 和 Safari 都不是)下运行.音频对象抛出错误(代码 4).
这是为什么?我怎样才能让它在 iOS 下工作? 不涉及自动启动.请看我下面的代码:
代码
$(document).ready(function() {清除日志();log('文件准备好！');$('.clickable').click(function() {var 值 = $(this).html();playAudio('res/audio/', '1.wav');});});//==============//声音的功能播放音频(路径，src){log('playAudio 被调用！参数:' + path + ', ' + src);$('#path').html('path ->' + path);$('#file').html('file ->' + path + src);如果(音频类型！=未定义"){log('使用 HTML5 播放音频...');var audioUrl = 路径 + src;log('audioUrl:' + audioUrl);var 音频 = 新音频()；audio.src = audioUrl;audio.type = '音频/x-wav';audio.addEventListener('错误', function() {log('音频错误:' + audioUrl + '; ' + JSON.stringify(audio.error));$('#audioStatus').html('音频错误:' + audioUrl + '; ' + JSON.stringify(audio.error));});audio.addEventListener('play', function() {log('开始音频:' + audioUrl + '; MIME-type: ' + audio.type);$('#audioStatus').html('播放音频:' + audioUrl);});audio.addEventListener('结束', function() {log('播放结束:' + audioUrl);$('#audioStatus').html('停止...');});audio.addEventListener('canplay', function() {音频播放()；});} 别的 {log('无法通过 HTML5 播放音频 -> !(typeof Audio != "undefined")');}}//==============//实用程序功能日志(s，showAlert){var now = new Date();var text = makeTwoDigits(now.getHours()) + ':' + makeTwoDigits(now.getMinutes()) + ':' + makeTwoDigits(now.getSeconds()) + ' >>' + s;$('#console').append('<p>' + text + '</p>');控制台日志(文本)；如果(显示警报){警报(文本)；}}函数 clearLog() {$('#console').html('<p><strong>Console</strong> <span>[clear]</span></p>');$('#console span').click(function() {清除日志();});}函数 makeTwoDigits(x) {如果 (x <10) {返回'0' + x;} 别的 {返回 '' + x;}} {边距:0；填充:0；box-sizing: 边框框；}身体 {溢出-y:滚动；背景颜色:#EEE；}.clickable {光标:指针；}.图标 {文本对齐:居中；}.应用程序 {宽度:256px；高度:自动；边距:50px 自动；填充:20px；背景:线性梯度(#9dd2ea，#8bceec)；边框半径:10px；}.数字，.展示 {溢出:隐藏；}.app .numbers 跨度 {向左飘浮;宽度:50px；高度:50px；背景:白色；边框半径:10px；填充:10px；边距:10px；行高:32px；文本对齐:居中；光标:指针；}.app .display span {向左飘浮;宽度:190px；高度:50px；背景:灰色；白颜色;边框半径:10px；填充:10px；边距:10px；行高:32px；文本对齐:居中；光标:指针；}.app .debug {文本对齐:居中；边距顶部:10px；}#安慰 {宽度:80%；边距:20px 自动；填充:20px；背景:线性渐变(#9dd2ea，#00d3ec)；边框半径:10px；}#控制台 p {边距:10px 0px;}#控制台跨度{浮动:对；光标:指针；}<头><meta charset="utf-8"/><link rel="stylesheet" type="text/css" href="css/index.css"/><title>我可以说一个！</title><身体><div class="app"><div class="可点击图标">点击我的机器人头！</div><div class="可点击图标"><img src="icon.png"/><div class="debug">信息:</div><div id="path" class="debug">N/A</div><div id="file" class="debug">N/A</div><div id="audioStatus" class="debug">N/A</div>
<div id="控制台"><p><strong>控制台</strong><span>[清除]</span></p>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script><script src="js/prefixfree-1.0.7.js" type="text/javascript"></script><script src="js/index.js" type="text/javascript"></script></html>
将调用移至canplay"事件侦听器之外的 audio.play().要在移动设备上播放音频/视频，您需要来自用户的直接、物理和同步交互.您确定了前两个，但是当您将 audio.play() 放在事件侦听器中时，您打破了同步要求.
//之前audio.addEventListener('canplay', function() {音频播放()；});//后音频播放()；I built a simple demo app to test HTML5-Audio. When you touch or click the robot's head the webapp says "eins", which is german for "one" (I had this soundfile on my computer for testing).
You can test the demo app here: http://jstesproject.cwsurf.de/
(Remarks: The robot is the phonegap icon, but there is NO phonegap or cordova technology involved. It is plain HTML5, Javascript (+jQuery) and CSS. Also, you have manually click the robot's head, so there is NO autostart involved.)
The webapp works fine on desktop browsers (I tested Chrome and Firefox) and on Android native browser (I tested with Android 4.0). However, I cannot get it to work under iOS (iPhone, neither Chrome nor Safari). The Audio-Object throws an error (code 4).
Why is this? How can I get it to work under iOS? There is no autostart involved. Please see my code below:
Code
$(document).ready(function() {
clearLog();
log('Document ready!');
$('.clickable').click(function() {
var value = $(this).html();
playAudio('res/audio/', '1.wav');
});
});
//==============
// AUDIO
function playAudio(path, src) {
log('playAudio called! Arguments: ' + path + ', ' + src);
$('#path').html('path -> ' + path);
$('#file').html('file -> ' + path + src);
if (typeof Audio != "undefined") {
log('Playing Audio using HTML5...');
var audioUrl = path + src;
log('audioUrl: ' + audioUrl);
var audio = new Audio();
audio.src = audioUrl;
audio.type = 'audio/x-wav';
audio.addEventListener('error', function() {
log('Audio error: ' + audioUrl + '; ' + JSON.stringify(audio.error));
$('#audioStatus').html('Audio error: ' + audioUrl + '; ' + JSON.stringify(audio.error));
});
audio.addEventListener('play', function() {
log('Starting audio: ' + audioUrl + '; MIME-type: ' + audio.type);
$('#audioStatus').html('Playing audio: ' + audioUrl);
});
audio.addEventListener('ended', function() {
log('Playback ended: ' + audioUrl);
$('#audioStatus').html('Stopped...');
});
audio.addEventListener('canplay', function() {
audio.play();
});
} else {
log('Cannot play audio via HTML5 -> !(typeof Audio != "undefined")');
}
}
//==============
// UTILS
function log(s, showAlert) {
var now = new Date();
var text = makeTwoDigits(now.getHours()) + ':' + makeTwoDigits(now.getMinutes()) + ':' + makeTwoDigits(now.getSeconds()) + ' >> ' + s;
$('#console').append('<p>' + text + '</p>');
console.log(text);
if (showAlert) {
alert(text);
}
}
function clearLog() {
$('#console').html('<p><strong>Console</strong> <span>[clear]</span></p>');
$('#console span').click(function() {
clearLog();
});
}
function makeTwoDigits(x) {
if (x < 10) {
return '0' + x;
} else {
return '' + x;
}
}
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-y: scroll;
background-color: #EEE;
}
.clickable {
cursor: pointer;
}
.icon {
text-align: center;
}
.app {
width: 256px;
height: auto;
margin: 50px auto;
padding: 20px;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 10px;
}
.numbers,
.display {
overflow: hidden;
}
.app .numbers span {
float: left;
width: 50px;
height: 50px;
background: white;
border-radius: 10px;
padding: 10px;
margin: 10px;
line-height: 32px;
text-align: center;
cursor: pointer;
}
.app .display span {
float: left;
width: 190px;
height: 50px;
background: grey;
color: white;
border-radius: 10px;
padding: 10px;
margin: 10px;
line-height: 32px;
text-align: center;
cursor: pointer;
}
.app .debug {
text-align: center;
margin-top: 10px;
}
#console {
width: 80%;
margin: 20px auto;
padding: 20px;
background: linear-gradient(#9dd2ea, #00d3ec);
border-radius: 10px;
}
#console p {
margin: 10px 0px;
}
#console span {
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>I can say one!</title>
</head>
<body>
<div class="app">
<div class="clickable icon">CLICK MY ROBOT-HEAD!</div>
<div class="clickable icon">
<img src="icon.png" />
</div>
<div class="debug">Info:</div>
<div id="path" class="debug">N/A</div>
<div id="file" class="debug">N/A</div>
<div id="audioStatus" class="debug">N/A</div>
</div>
<div id="console">
<p><strong>Console</strong> <span>[clear]</span>
</p>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/prefixfree-1.0.7.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>
Move the call to audio.play() outside the "canplay" event listener. To play audio/video on mobile devices you need direct, physical and synchronous interaction from the user. You nailed the first two, but when you put that audio.play() inside the event listener you break the synchronous requirement.
// BEFORE
audio.addEventListener('canplay', function() {
audio.play();
});
// AFTER
audio.play();
这篇关于HTML5 音频 - 为什么不能在 iOS 上工作?(不涉及自动播放)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
