Autoplaying m4a audio on mobiles - Teh Forum

CodingAutoplaying m4a audio on mobiles

From:	Manthorp	9 Apr 2011 10:24
To:	ALL	1 of 26

Bearing in mind that I'm a complete and utter coding dilettante, please can I beg the possie's indulgence and support?

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?

"We all have flaws, and mine is being wicked."
James Thurber, The Thirteen Clocks 1951

www.manthorp.co.uk

0/0

More

Message 38369.2 deleted 9 Apr 2011 10:43 by MANTHORP

From:	Matt	9 Apr 2011 11:08
To:	Manthorp	3 of 26

38369.3 In reply to 38369.1
You'll probably need a plugin. I'm not sure what kind of support for audio plugins the mobile browsers have, but most of them support Flash these days. You could maybe knock together a small Flash audio player that fetches and plays the audio. Not sure if Flash supports m4a though.

0/0

More

From:	Manthorp	9 Apr 2011 11:15
To:	Matt	4 of 26

38369.4 In reply to 38369.3
Bugger. Ta Matt. "We all have flaws, and mine is being wicked." James Thurber, The Thirteen Clocks 1951 www.manthorp.co.uk

0/0

More

From:	Matt	9 Apr 2011 11:28
To:	Manthorp	5 of 26

38369.5 In reply to 38369.4
Should have said most of them, with the exception of the iPhone of course. Not sure what you could use as a replacement.

0/0

More

From:	Manthorp	9 Apr 2011 12:58
To:	Matt	6 of 26

38369.6 In reply to 38369.5
I've gone for opening an mp4 video file directly, rather than a webpage. Not exactly what I wanted, but it sort of does the job. QR Code .gif of sample attached. "We all have flaws, and mine is being wicked." James Thurber, The Thirteen Clocks 1951 www.manthorp.co.uk
Attachments:

0/0

More

From:	Matt	9 Apr 2011 13:06
To:	Manthorp	7 of 26

38369.7 In reply to 38369.6
Not quite working here. Android Gingerbread 2.3.3. Barcode works (with both Google Goggles and Barcode Reader), but the audio doesn't play in the Android Browser. It doesn't prompt me to download it or play it or ... well, anything at all.

0/0

More

From:	Mouse	9 Apr 2011 13:11
To:	Manthorp	8 of 26

38369.8 In reply to 38369.6
Works here on Android 2.3.2 but not on 2.2.1.. How odd. Roses are bollocks, Violets are crud, I hate bloody flowers, And much prefer mud.

0/0

More

From:	Manthorp	9 Apr 2011 13:27
To:	Mouse	9 of 26

38369.9 In reply to 38369.8
Curious. Thanks for feedbacks... "We all have flaws, and mine is being wicked." James Thurber, The Thirteen Clocks 1951 www.manthorp.co.uk

0/0

More

From:	Manthorp	9 Apr 2011 13:41
To:	Manthorp	10 of 26

38369.10 In reply to 38369.9
How about the sound file only? "We all have flaws, and mine is being wicked." James Thurber, The Thirteen Clocks 1951 www.manthorp.co.uk
Attachments:

0/0

More

From:	Matt	9 Apr 2011 14:07
To:	Manthorp	11 of 26

38369.11 In reply to 38369.6

I'm thinking HTML5 audio tag with fallback to Flash (using WordPress Audio Player - standalone version) will give you the most compatibility.

The HTML5 audio format support in browsers is stupid, i.e. Firefox 3.6+ and Opera 10.5+ will only play Ogg Vorbis and Wave, Chrome 6+ will play Ogg Vorbis and MP3, and Safari and IE9 MP3 and Wave.

The WordPress Audio Player will only do MP3 as well, but it's better than nothing.

The code below will do the fallback for you, tested and working in Firefox, IE9 and Android Browser on 2.3.3. I don't have an iPhone to test it with, but presumably it will work with the <audio> tag.

To get this to work, you'll need to download and place the Word Press Audio Player in /audio-player/ directory of soundgems.co.uk and provide both MP4 and MP3 versions of the audio files (put them in /audio/).

code:

<!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>

0/0

More

From:	Manthorp	9 Apr 2011 14:39
To:	Matt	12 of 26

38369.12 In reply to 38369.11
Ee, what a palaver. I'll give it a go. Shame, I think the quality of m4a knocks mp3 into a cocked hat. Thanks for the words of wit & wisdom. "We all have flaws, and mine is being wicked." James Thurber, The Thirteen Clocks 1951 www.manthorp.co.uk

0/0

More

From:	Manthorp	9 Apr 2011 17:00
To:	Matt	13 of 26

38369.13 In reply to 38369.11

That works brilliantly on my pc browsers, but I'm only getting the
image in my android, not the audio. Your code with the few tweaks I made below:

code:

<!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>

Could I centre the player bar too?

"We all have flaws, and mine is being wicked."
James Thurber, The Thirteen Clocks 1951

www.manthorp.co.uk

Attachments:

0/0

More

From:	Matt	9 Apr 2011 18:53
To:	Manthorp	14 of 26

38369.14 In reply to 38369.13
Excellent. The audio works fine for me on Android 2.3.3. Do you have Flash installed on the phone? To center the audio controls you should be able to move the closing </div> from after the <img /> tag and put it after the closing </audio>. Edit: You need to go and get the Word Press Audio Player from my previous post and upload it so the audio-player.js, player.swf other files are located in soundgems.co.uk/audio-player/

0/0

More

From:	Peter (BOUGHTONP)	9 Apr 2011 23:12
To:	Matt	15 of 26

38369.15 In reply to 38369.14
Works for me on Android 2.3.1 According to the Market, I do not have Flash Player 10.2 installed. Steve: Your audio file is BORING! :@ `3.1415P265E589T932E846R64338`

0/0

More

From:	Manthorp	10 Apr 2011 08:38
To:	Matt	16 of 26

38369.16 In reply to 38369.14

Thanks again, Matt. I had to specify the sub-folder audio-player/assets that the executables had been installed to by the default installation. That seems to have sorted it, though if as many of the possie as possible could try the attached QR Code, my gratitude would know none of Greg's bounds.

The player bar has disappeared from my android display (which is good) but is now to the right of the display in my pc browsers. Bizarrely, in Chrome, the player bar is going backwards. Amended code below.

code:

<!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>

"We all have flaws, and mine is being wicked."
James Thurber, The Thirteen Clocks 1951

www.manthorp.co.uk

Attachments:

0/0

More

From:	Manthorp	10 Apr 2011 08:44
To:	Peter (BOUGHTONP)	17 of 26

38369.17 In reply to 38369.15
What do you mean, BeeP? There are women who would spontaneously conceive at the sound of me saying 'soundgems 1' If you'd rather, I have four other sample files uploaded, ranging from 'soundgems 2' to 'soundgems 5'. Actually the real files will be rather groovy. GreyHair & have been commissioned to do a piece of work for the Northwest Sound Archive. We're creating pocket money-priced jewellery for the museum shop with QR Codes laser-etched onto wood (image attached), which open files from the collections. "We all have flaws, and mine is being wicked." James Thurber, The Thirteen Clocks 1951 www.manthorp.co.uk
Attachments:

0/0

More

From:	patch	10 Apr 2011 09:03
To:	Manthorp	18 of 26

38369.18 In reply to 38369.16
Works fine on the stock browser on Android 2.2. And Firefox 4.0 on my PC too, incidentally. No player bar to be seen.

0/0

More

From:	Manthorp	10 Apr 2011 09:41
To:	patch	19 of 26

38369.19 In reply to 38369.18
Ta Patchy Indian. "We all have flaws, and mine is being wicked." James Thurber, The Thirteen Clocks 1951 www.manthorp.co.uk

0/0

More

From:	Peter (BOUGHTONP)	10 Apr 2011 13:53
To:	Manthorp	20 of 26

38369.20 In reply to 38369.17
But you're not - you're saying "sound,gems,won" in almost a monotonous/computerised way. No woman has conceived from a SatNav. :P Are those actual examples or proof of concepts? I'm certainly not a jewelry expert, but I thought people liked fancy shapes? I do like the idea though. Oh, and on #16 it works with autoplay, but visible controls on right. (last time they were below, if that's relevant) `3.1415P265E589T932E846R64338`

0/0

More

Reply to All

Adjust text size : Smaller 10 Larger

Beehive Forum 1.5.2 | FAQ | Docs | Support | Donate!

©2002 - 2024 Project Beehive Forum

Forum Stats