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 枚あり、それぞれに画像とカスタムの再生ボタンと一時停止ボタンを備えたツールバーがあります。奇妙なのは、次のスライドにスワイプすると前の音声がまだ再生されていることです。もう一度スワイプして 3 番目のスライドに移動すると、最初のスライドの音声が停止します。2枚目のスライドで止めていただきたいです。activeitemchange リスナーを試してみます。
カルーセルに追加されたリスナー:
listeners:{
activeitemchange:function()
{
var activeIndex = this.getActiveIndex();
document.getElementById('player'+activeIndex).pause();
}
}