I am writing a series of simple pages that will be opened by QR codes on smartphones. The pages comprise a static image and an m4a audio file that should open automatically and play once. I've created this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body bgcolor="#FFFFFF" text="#000000"><center><img src="soundgemsimage1.gif" width="480" height="480" title="" alt="" /></center>
<embed src="soundgems1.m4a" autostart="true" loop="false"
width="2" height="0">
</embed>
</body>
</html>
There's a sample HERE:
http://www.soundgems.co.uk/soundgems1/index.htm
which opens as desired(ish) in my PC browser, but the sound isn't playing on my mobile. If I point the mobile directly at the sound file like THIS:
http://www.soundgems.co.uk/sound_files/soundgems1.m4a
it plays fine, so it's not a format compatibility issue. Please can anyone explain where I'm going wrong?
<!DOCTYPE html>
<head>
<title>Soundgems</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="/audio-player/audio-player.js"></script>
<script type="text/javascript">
AudioPlayer.setup("/audio-player/player.swf", {
width: 1,
initialvolume: 100,
transparentpagebg: "yes",
left: "000000",
lefticon: "FFFFFF"
});
</script>
</head>
<body>
<div align="center">
<img src="/soundgemsimage1.gif" width="480" height="480" title="" alt="" />
</div>
<audio controls="false" preload="auto" autobuffer autoplay id="audioplayer">
<source src="/audio/soundgems1.mp4" />
<script type="text/javascript">
var audio_player = document.createElement('audio');
if (!audio_player.canPlayType || !audio_player.canPlayType('audio/mp4')) {
AudioPlayer.embed("audioplayer", {
soundFile: "/audio/soundgems1.mp3",
autostart: "yes",
loop: "no",
animation: "no",
transparentpagebg: "yes"
});
}
</script>
</audio>
</body>
</html><!DOCTYPE html>
<head>
<title>Soundgems</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="/audio-player/audio-player.js"></script>
<script type="text/javascript">
AudioPlayer.setup("/audio-player/player.swf", {
width: 1,
initialvolume: 100,
transparentpagebg: "yes",
left: "000000",
lefticon: "FFFFFF"
});
</script>
</head>
<body>
<div align="center">
<img src="/soundgemimages/soundgemsimage1.gif" width="480" height="480" title="" alt="" />
</div>
<audio controls="false" preload="auto" autobuffer autoplay id="audioplayer">
<source src="/audio/soundgems1.m4a" />
<script type="text/javascript">
var audio_player = document.createElement('audio');
if (!audio_player.canPlayType || !audio_player.canPlayType('audio/mp4')) {
AudioPlayer.embed("audioplayer", {
soundFile: "/audio/soundgems1.mp3",
autostart: "yes",
loop: "no",
animation: "no",
transparentpagebg: "yes"
});
}
</script>
</audio>
</body>
</html><!DOCTYPE html>
<head>
<title>Soundgems</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="/audio-player/assets/audio-player.js"></script>
<script type="text/javascript">
AudioPlayer.setup("/audio-player/assets/player.swf", {
width: 1,
initialvolume: 100,
transparentpagebg: "yes",
left: "000000",
lefticon: "FFFFFF"
});
</script>
</head>
<body>
<div align="center">
<img src="/soundgemimages/soundgemsimage1.gif" width="480" height="480" title="" alt="" />
<audio controls="false" preload="auto" autobuffer autoplay id="audioplayer">
<source src="/audio/soundgems1.m4a" />
<script type="text/javascript">
var audio_player = document.createElement('audio');
if (!audio_player.canPlayType || !audio_player.canPlayType('audio/mp4')) {
AudioPlayer.embed("audioplayer", {
soundFile: "/audio/soundgems1.mp3",
autostart: "yes",
loop: "no",
animation: "no",
transparentpagebg: "yes"
});
}
</script>
</audio>
</div>
</body>
</html>