Autoplaying m4a audio on mobiles

From: Manthorp 9 Apr 2011 14:39
To: Matt 12 of 26
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.
EDITED: 9 Apr 2011 14:40 by MANTHORP
From: Manthorp 9 Apr 2011 17:00
To: Matt 13 of 26
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?
Attachments:
From: Matt 9 Apr 2011 18:53
To: Manthorp 14 of 26
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/
EDITED: 9 Apr 2011 18:56 by MATT
From: Peter (BOUGHTONP) 9 Apr 2011 23:12
To: Matt 15 of 26
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! :@
From: Manthorp10 Apr 2011 08:38
To: Matt 16 of 26
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>
Attachments:
From: Manthorp10 Apr 2011 08:44
To: Peter (BOUGHTONP) 17 of 26
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.
Attachments:
From: patch10 Apr 2011 09:03
To: Manthorp 18 of 26
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.
From: Manthorp10 Apr 2011 09:41
To: patch 19 of 26
Ta Patchy Indian.
From: Peter (BOUGHTONP)10 Apr 2011 13:53
To: Manthorp 20 of 26
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)
From: Manthorp10 Apr 2011 14:43
To: Peter (BOUGHTONP) 21 of 26
I will bow to your wisdom on all manner of subjects, but women & lerrrrrve...

Bear in mind that these are pitched squarely at museum shop clientele & we've market tested these - there's definitely a market for this stuff at the under-a-fiver end.
From: Manthorp11 Apr 2011 12:15
To: Matt 22 of 26
Sorry, Matt (or any other web-knitters), one last question: I've got the player bar centred now and it's working on a wide range of different phones. The sound file starts automatically on Android, and needs to be clicked on iPhone (everything I've read about iPhone says that this is unavoidable). However, the play button on the page is very small on the iPhone. Is there a way I can I biggerize it?

Current state of code:

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="" />
</div>
<div align="center">
<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>


PS. Same URL as before, http://www.soundgems.co.uk/soundgems1.htm (you can use the QR Code I attached to a previous post) and yes, BeeP, it's the same soundfile & image as before.
EDITED: 11 Apr 2011 12:22 by MANTHORP
From: Matt11 Apr 2011 13:27
To: Manthorp 23 of 26
Probably just line 8 of the code, where it says "width: 1,". Make the number bigger and see what it looks like.
From: koswix11 Apr 2011 13:32
To: Manthorp 24 of 26
Doesn't work on Android if you have plugins (i.e. flash) set to on demand.
From: Manthorp11 Apr 2011 14:26
To: koswix 25 of 26
Well don't have it set on demand then, you nuisance.

It's bloody hard enough getting this fucking thing working without grumpy Turing machines mithering that I sound robotic and mardy Scotch Onionistas deliberately setting obstacles in my way.
From: koswix11 Apr 2011 14:33
To: Manthorp 26 of 26

Yeah, probably but you might want to make a note in the help/faq/whatever you may or may not plan on having.

 

And I'd change it from on demand to enabeld, except the BBC news site causes it to crash to the desktop on certain pages with it turned on :(