Play an audio resource taken from a remote server on Sencha Touch

Question

I am working on a Sencha touch app. I made a jsonP request which returns an audio url, I will like to write a function that will play that audio on a button click.

The structure of the call and the response is as follows:

Ext.data.JsonP.request({
                    url: 'https://api.pearson.com/v2/dictionaries/entries',
                                callbackKey: 'callback',
                                params: {
                                    apikey: 'ZzNOnelsRcNcE7Npoh2SdAeQbjRA4XE4',
                                    headword: 'school' 
                                }

 // RESPONSE.....

{
  "status": 200,
  "offset": 0,
  "limit": 2,
  "count": 2,
  "total": 245,
"url": "/v2/dictionaries/entries?headword=school&limit=2",
  "results": [
{
  "datasets": [
    "ldoce5",
    "dictionary"
  ],
  "headword": "school",
  "homnum": 1,
  "id": "cqAFqfYHHt",
  "part_of_speech": "noun",
  "senses": [
    {
      "definition": "a place where children are taught",
      "examples": [
        {
          "audio": [
            {
              "type": "example",
              "url": "/v2/dictionaries/assets/ldoce/exa_pron/p008-001919005.mp3" // The audio url
            }
          ],
          "text": "His mother always used to pick him up from school."
        }
      ],
      "gramatical_info": {
        "type": "uncountable and countable"
      },
      "signpost": "where children learn"
    }
  ],
  "url": "/v2/dictionaries/entries/cqAFqfYHHt"
},
{
  "datasets": [
    "wordwise",
    "dictionary"
  ],
  "headword": "school",
  "id": "cqARFaW3Aw",
  "part_of_speech": "noun",
  "senses": [
    {
      "definition": "a place where children are taught, or the time they spend there every day",
      "examples": [
        {
          "text": "Mr Mamood is a teacher at my school ."
        }
      ]
    }
  ],
   "url": "/v2/dictionaries/entries/cqARFaW3Aw"
  }
  ]
   }

Answer 1

You could use a Ext.Audio component provided by Sencha Touch, hiding it.

{
    id: 'audio',
    xtype: 'audio',
    hidden: true,
    url: null
}

As soon as you get the audio url set it on the component:

Ext.getCmp('audio').setUrl(mp3Url);

Then you would use a button to toggle play/pause on it:

{
    xtype: 'button',
    text: 'Play'
    handler: function() {
        // get the audio component (using its id)
        var audio = Ext.getCmp('audio');

        audio.toggle();
        this.setText(audio.isPlaying() ? 'Pause' : 'Play');
    }
}

Check out http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Audio for a working example.