在Sencha Touch上播放从远程服务器获取的音频资源

时间:2014-04-27 23:02:51

标签: sencha-touch sencha-touch-2 html5-audio

我正在研究Sencha触控应用程序。我做了一个jsonP请求,它返回一个音频网址,我想编写一个函数,在点击按钮时播放该音频。

呼叫结构和响应如下:

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"
  }
  ]
   }

1 个答案:

答案 0 :(得分:1)

您可以使用Sencha Touch提供的Ext.Audio组件隐藏它。

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

只要您获得音频网址,就将其设置在组件上:

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

然后你会用一个按钮来切换播放/暂停:

{
    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');
    }
}

查看http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Audio了解工作示例。