View Full Version : What's wrong with Audio Example in 0.97?

20 Oct 2010, 10:12 AM
Hi there,

I've upgraded to 0.97 and suddenly have problems with audio playback. My implementation followed the audio example in 0.96 and worked fine. In 0.97 the hidden audio does not start playback when the button is pressed. It works on my PC, but not on 3rd Gen iPod touch running IOS 4.1.

Can anyone help? This is a rather urgent matter and I've tried all that I could come up with.

Thanks in advance,
Jac Stofberg

21 Oct 2010, 12:07 PM
Any ideas? Can anyone even reproduce this problem? That'll be a start:)

Kind regards,

21 Oct 2010, 2:27 PM
The hidden audio example is working for me in my dev environment, using the chrome browser.

What browser / client are you rendering with? Are there errors on the console?

Can you play the mp3 file straight in the directory?

21 Oct 2010, 4:23 PM

First off...interesting name:) Second...thanks for replying.

The audio example works great on my PC in both Chrome and Safari. The problem manifests itself with mobile safari on the iPod Touch and iPhone. I'm running IOS 4.1 and the latest mobile Safari. It worked fine in 0.96, but has this problem in 0.97.

The player does not respond to
hiddenPlayer.toggle(); or

As soon as you use the default audio controls (assuming enableControls:true) to start playback, the
.toggle(); or
.play(); methods start working correctly. Therefore seems that for some reason the media component does not start loading the audio automatically.

Check it out on Mobile Safari. Maybe you'll get the same problem then.

Kind regards,

25 Oct 2010, 8:05 AM
Sorry for the delay in responding to you, but my audio functionality had to be ported before I could test in an iOS. I am getting inconsitent performance with my audio on my Mobile Safari browser, and whatever Safari browser is on an iPad. One thing I have noticed is it helps to ensure generous loading and rendering time, prior to firing a sound causing event.

Also it seems to me there is a small delay in the playing of the sound. I am using the .play() method. I have also noticed that if trigger one sound causing event before the prior sound causing event has finished playing its sound the subsequent sound seems not to play.

Not saying you are doing this, but if one didnt know this I could see how if they kept prompting the app to make a noise before it has completed (especially with the toggle command), it may appear totally broken, when it is simply slow.

Not sure what approach I will take to debug what seems to an iOS related issue (bug is such a harsh term;-). Is anyone aware of how to debug in mobile safari / an iOS based browser? Alternative debugging suggestions are most welcome! (update, note to self - check the forums: http://www.sencha.com/forum/showthread.php?108491-Debugging-Mobile *)

Lastly very happy to _attempt_ assistance, and thanks for appreciating my choice of handles, it comes from my 'Cory Doctorow-ish' sensibilities.

* short answer is goto to iPhone's setting menu then in the safari settings turn developer debug console to on.

25 Oct 2010, 9:08 AM

Thank you for the update. I see what you mean with loading times and such. The thing is that it still works perfectly when I use Sencha Touch 0.96. I therefore have my doubts that this is purely an iOS issue. Something changed in the library that resulted in slow loading times and response to events.

Even on a small audio file (e.g. crash.mp3 that comes with the audio example) I find it almost impossible to get the audio to play back within any reasonable time. I can't have the user wait that long.

Our app is going live very soon, so I'm hoping one of the Sencha Team has a look at the audio component sometime.

I suspect they have their hands full with other more important requests before the launch of version 1 later this year.


25 Oct 2010, 12:03 PM
Yes, I spoke inartfully when I said "iOS related issue". I should have said that _my_ problem seems to manifest in Mobile Safari as opposed to other browsers, why is still unknown, and it could be entirely on my end. I have had much better luck by sizing down the file size.

Maybe in the interrim you could look a very small audio file, and see if that made a difference. The crash file appears to me to be to be large at 2+ MB in the v.97.

Obviously if the example is not working in .97 and is .96 that is a "challenge". Did you diff the Audio class in .97 compared to .96 to see what if anything has changed? You could try "porting" the .96 Audio class to your .97 and see if that made a difference, "just thinking out loud" at this point.

Best of luck with your launch.

25 Oct 2010, 12:47 PM
I have now replaced the default sound file (crash.mp3) in the audio example with a 53kb mp3 sound effect and still have no response to the button click event. To me this means that the problems are not related to slow loading or event response.

I performed a diff between the audio component files in 0.96 and 0.97, but nothing changed there. It must be some other change (seemingly unrelated) that causes this behavior.

Have you tried to just run the audio example that comes with the 0.97 library? Does it work for you in mobile Safari?

It only starts working for me after I've clicked play on the default controls. Only THEN will the audio start to load and the toggle button will work nicely henceforth.

It therefore seems that the problem is getting the audio component to start loading/buffering the audio in the first place. It needs a kick to get it going, and I don't know what kind of kick it needs:)


25 Oct 2010, 1:27 PM

I just tried testing the audio example in mobile safari and it didn't work for me. Misery still loves company right...


25 Oct 2010, 1:31 PM
:) Great, I have someone else who shares the burden:)

26 Oct 2010, 8:33 AM
Hi Jac,

Something for you to try. Yesterday, I was refactoring a page in my app to improve the UI. After that I decided to spend some time debugging the audio on mobile safari.

I decided to try a few things to ensure other browser "pages" werern't having javascript errors that were impacting the script interpretation of my page. I closed all of the other safari pages, and then opened the new page. Then for the sake of peeing on a spark plug*, I decided to restart my phone, thus ensuring no other errors could be to blame, only "my" code.

After the reboot, niether of my 2 pages worked :-(, one of which hadn't changed in 24 hours, and both still working in my windows Safari browser. So I went to bed.

In the morning I did my normal routine checked the web on my phone for my morning cup of "know", after which, I guess because I was insane I tried my pages again expecting different results (despite no code changes) and lo and behold my pages sound started working again much more consistently, although not quite perfectly.

Why I can only guess...was it the fried chicken I sacrified with burnt offerings? Either that or the Sencha Touch doll I made and placed in a happy place**. However this didnt fix my audio example page, so this may not be much help. However maybe in your application this approach / voodoo will help.

I thought it was worth mentioning, even if I don't really understand the behavior I am trying to describe / proscribe.

* In the movie 1983 War Games, just prior to engaging the NORAD computer in a game of tic tac toe, veteran character actor Barry Corbin confesses to Mathew Broderick's character that at this point he would "pee on a spark plug" if he thought it would help.

** forgive me if this post is a bit too flipant or rambling last night was a late one, trying to get ready for the Wendesday Sencha Touch Contest deadline.

26 Oct 2010, 1:36 PM
Well my results aren't reproducible. Not saying don't try having more than one safari mobile page open, but at this point I am chalk up my earlier post as interesting anecdote, but one that likely has a mundane explanation not at all related to the number of pages safari has open.

That is unless, Jac, you see something that backs up my sleep deprived "observations", I am use that term loosely b-(.

27 Oct 2010, 4:31 PM
I've found a work-around for the 0.97 hidden audio example that works for now.

I modified the Ext.Media afterRender fundtion code in ext-touch-debug.js to include "this.media.dom.load();" on the last line of the function.

Ext.Media = Ext.extend(Ext.Container, {
afterRender : function() {
var cfg = this.getConfiguration();
Ext.apply(cfg, {



For some reason this works. It seems to give the audio the kick it needs to start loading after the component has rendered. No doubt this is a temporary fix and a bad one at that (I am not even exactly sure why it works), but it saved me from impending doom:)

Another problem (that steames_punk pointed out) is that there exists no function/method to change the audio src url with. I've solved this temporarily by adding the following function to the Ext.Media code in ext-touch-debug.js.

setAudioUrl: function(url)
this.media.dom.src = url;

It works for now.


27 Oct 2010, 4:36 PM
Also, worth adding is that my audio implementation for my project now works without the fix described above after changing major pieces of code in my project. I had to resort to creating a new audio component every time I wanted to play a new audio file though. I remove the existing audio component from my extended panel every time a new audio file is selected and replace it with a new one.

This is even less of an elegant solution, but the audio component still seems very unstable and therefore I'm happy for now.

The previous additions to the ext-touch-debug.js file were still the only way I could get my audio files to load on iPod Touch 3rd gen running IOS 4.1.

31 Jan 2011, 11:08 AM
There seems to be a problem now with iPhone 4.2. Audio stoped working me (works fine on iPhone 4.0). Can anyone verify that?

10 Feb 2011, 9:09 PM
Yeah I'm pretty sure this is a 'feature' of ios 4.2. If anyone is interested, you can make sencha touch buttons work with html5 audio in ios by attaching this code to the button object:

listeners: {
el: {
tap: playAudio

where playAudio is a handler that will call the audio.play() method.

Once you use a gesture (attached to html element or body) to play audio, all the other javascript programmatic stuff works properly. This is why apps with the visible audio 'controls' work fine.

I have an app that uses html5 audio to play game sound effects. I use one mp3 file containing all the sounds and just seek to the sound I want by setting audio.currentTime and then calling audio.pause() in a setTimeout() for the correct duration.

The beginning of my sound file has one second of silence that is played by the playAudio function in the code above - just to initialize things. You can attach the tap listener to a sencha touch button that the user will have to press anyway for any reason at all when the app is loaded.

I realize this is a classic bag-stapling operation. Thank you Apple...


14 Feb 2011, 6:51 AM
If this works for you on iPhone 4.2.1, could you maybe paste more code? I would really appreciate it.
I have Sencha Icon that I use to play/pause audio, however as of 4.2.1 it stopped working.

14 Feb 2011, 9:55 AM
Hi hitman01,

Yes I have sencha buttons playing audio in ios 4.21

The key is that you have to use a gesture event to trigger the play() method before you try to do anything else. Here's an example of a game I'm working on at (this link may disappear in a few days):


The code is kind of a mess right now, but it plays sections of an mp3 file as sound clips.

Here is the code for a basic example that plays audio from a sencha touch button -
the online example is at:


index.js file:

var audioPlayer; // dom link to audio tag

/// sencha-touch code

onReady: function() {

audioPlayer = document.getElementById("aplayer");

// audio handler functions

function playAudio() {

function pauseAudio() {

// audio button example

var playBtn = new Ext.Button({
text: 'play',
listeners: {
el: {
tap: playAudio


// main toolbar

var toolbar = new Ext.Toolbar({
dock: 'bottom',
items: [
text: 'pause',
handler: pauseAudio,
ui: 'action'

// main panel

new Ext.Panel({
fullscreen: true,
dockedItems: [toolbar],
html: 'hello'


Here's the index.html file:

<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css" />

<script type="text/javascript" src="./sencha-touch-debug.js"></script>
<script type="text/javascript" src="index.js"></script>

<style type="text/css"><!--
#sketchpad{ border: 1px solid #000;}


<div style="display: none;">
<div id='pooh' >
<audio id='aplayer' src='sound1.mp3' type='audio/mpeg' preload="auto" >



18 Feb 2011, 8:20 AM
Hi tkzic,

Thanks for your help. It worked perfectly.