sencha touch 2 在轮播中滑动到下一张卡片时停止音频?
Posted
技术标签:
【中文标题】sencha touch 2 在轮播中滑动到下一张卡片时停止音频?【英文标题】:sencha touch 2 stop audio when sliding to next card in carousel? 【发布时间】:2013-03-05 02:37:47 【问题描述】:使用 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 监听器。
监听器添加到轮播:
listeners:
activeitemchange:function()
var activeIndex = this.getActiveIndex();
document.getElementById('player'+activeIndex).pause();
【问题讨论】:
【参考方案1】:当您向左/向右滑动以更改为另一个项目时,您的轮播将触发 activeitemchange 事件。一个好主意是为该事件创建一个侦听器并调用命令来停止音频。
因为你没有提供任何源代码,所以这是我现在的提示。
【讨论】:
为轮播添加了一些来源,我会尝试添加一些听众。以上是关于sencha touch 2 在轮播中滑动到下一张卡片时停止音频?的主要内容,如果未能解决你的问题,请参考以下文章