Question

使用sencha touch 2，在旋转木马中，当我向前或向后滑动时，如何停止当前卡上的音频？

{
xtype: 'carousel',
iconCls: 'action',
style: 'background-color: #00A9A6;',
layout: { type:'hbox', pack:'start', align:'stretch' },
items: [
Ext.create('Ext.Container', { layout: 'hbox',
  items: [ 
  {
    items: [ { xtype: 'toolbar',
           docked: 'left', 
           layout: { type:'hbox', pack:'start', align:'stretch' },

            html: [
                "<audio id=\"player1\"><source src=\"audio/page 1.mp3\" type=\"audio/mpeg\"></audio><div style=\"position:relative;height:1500px;width:100px;margin:auto;\"><button class=\"pausebutton\" onclick=\"document.getElementById('player1').pause()\"></button><br/><button class=\"playbutton\" onclick=\"document.getElementById('player1').play()\"></button></div>"
            ].join("")
}], 
  }, 
  image_1
  ]
}),

Ext.create('Ext.Container', { layout: 'hbox',
  items: [ 
  {
    items: [ { xtype: 'toolbar',
               docked: 'left', 
               layout: { type:'hbox', pack:'start', align:'stretch' },

                html: [
                "<audio id=\"player2\"><source src=\"audio/page 2.mp3\" type=\"audio/mpeg\"></audio><div style=\"position:relative;height:1500px;width:100px;margin:auto;\"><button class=\"pausebutton\" onclick=\"document.getElementById('player2').pause()\"></button><br/><button class=\"playbutton\" onclick=\"document.getElementById('player2').play()\"></button></div>"
                ].join("")
    }], 
  }, 
  image_2
  ]
})
}

大约有30张类似的幻灯片，每张幻灯片都有一个图像和一个带有自定义播放和暂停按钮的工具栏。奇怪的是，当我滑动到下一张幻灯片时，前一个音频仍在播放，如果我再次滑动到第三张幻灯片，则第一张幻灯片的音频会停止播放。我希望它停在第二张幻灯片上。我将尝试使用activeitemchange监听器。

听众添加到carousel：

listeners:{
            activeitemchange:function()
            {
                var activeIndex = this.getActiveIndex();
                document.getElementById('player'+activeIndex).pause();
            }
}

Answer 1

当您向左/向右滑动以更改为另一个项目时，您的轮播将触发 activeitemchange 事件。一个好主意是为该事件创建一个监听器并调用命令来停止音频。

因为您没有提供任何源代码，所以这是我现在的提示。

当滑动到旋转木马中的下一张卡时，sencha触摸2停止音频？

1 个答案: