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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
