轮播中的 Sencha Touch Audio

Question

我希望每次在轮播中显示新面板时播放一个小型 mp3。我将音频 xtype 与自动播放一起使用，但这会导致启动时出现杂音。该问题出现在所有设备（模拟器、Chrome、ipad 和 nexus7）上。现在，我使用一个按钮来激活声音，但我希望它在需要时自动播放（在活动面板上）。它“听起来”很简单，但我无法让它工作。任何帮助表示赞赏。

这是一个轮播项目（带有按钮）：

 {
            layout: {
                type: 'vbox',
                align: 'stretch',                   
            },
            items: [
                {
                    flex:4,
                    xtype: 'image',
                    src: 'resources/images/hond.png',
                },                                      
                {
                    xtype: 'button',
                    text: 'Play',
                    iconCls: 'arrow_right',
                    cls: 'knopsound',
                        handler: function() {
                        Ext.getCmp('hond').toggle();
                        this.setText(Ext.getCmp('hond').isPlaying() ? 'Pause' : 'Play');
                        }
                },
                                    {
                    xtype: 'audio',
                    url: 'resources/images/hond.mp3',

                    id: 'hond',
                    loop: false,
                    enableControls: false,
                    hidden:true
                },

                {
                    flex:3,
                    xtype: 'video',
                    url: 'resources/images/test.mp4',
                    posterUrl: 'resources/images/bekijkgebaar.png',
                    cls: 'videoplayknop',
                    autoResume: true,
                    autoPause: true,
                    enableControls: false,
                }]},

Answer 1

您应该利用轮播上的activeitemchange(carousel, newItem, oldItem) 事件来播放声音。

我只是将要播放的声音的 url 存储在面板的自定义属性中。为此，您可以扩展 Ext.Panel 并在配置中添加一个自定义属性，以便获得该属性的 getter 和 setter。或者您可以只拥有一组声音 url，然后调用轮播的getActiveIndex() 来播放正确的声音。

一旦你得到了 url，你就可以使用一个虚拟的隐藏组件来播放它：

类似：

document.getElementById("dummy").innerHTML=
 '<embed src="' + soundurl + '" hidden="true" autostart="true" loop="false" />';

或者，如果您正在使用 Cordova 开发本机应用程序：

var media = new Media(url, onSuccess, onFailure);
media.play({ playAudioWhenScreenIsLocked : false });