我刚刚在我的网站上安装了soundmanager2。由于我的站点包含各种mp3链接,因此我选择使用sm2的inlineplayer解决方案,该解决方案可在页面上查找mp3并将其替换为inline player实例。播放器正在工作,我想添加一个进度条。
我在下面的链接中为进度栏找到了sm2解决方案,但是由于某种原因,该解决方案不适用于我。出现该栏,但未显示进度:How to add a song progress bar in SoundManager2?
您可以在以下位置看到带有进度条的播放器,它不起作用:http://goo.gl/oD90Oj/。
任何帮助将不胜感激!
我的sm2电话:
var inlinePlayer = null;
soundManager.setup({
// disable or enable debug output
debugMode: false,
// use HTML5 audio for MP3/MP4, if available
preferFlash: false,
useFlashBlock: true,
waitForWindowLoad: true,
// path to directory containing SM2 SWF
url: '../js/soundmanagerv2/swf/',
// optional: enable MPEG-4/AAC support (requires flash 9)
flashVersion: 9
});
// ----
soundManager.onready(function() {
// soundManager.createSound() etc. may now be called
inlinePlayer = new InlinePlayer();
});
// Setup progress bar width
soundManager.whileplaying(function() {
jQuery(".progBar").css('width', ((this.position/this.duration) * 100) + '%');
});
// Reset progress bar after play
soundManager.onfinish(function() {
jQuery(".progBar").css('width', '0');
});
我的CSS:
/* Style Progress Bar */
.progBarWrap {
background-color: #ccc;
height: 10px;
margin-top: 10px;
position: relative;
width: 100%;
}
.progBar {
width: 0;
background-color: #222;
height:10px;
}
最佳答案
soundManager没有名为whileplaying
的函数,您需要将soundManager.createSound
与whileplaying
选项一起使用,如您给出的SO答案所示。
或者,您知道开始/停止的时间和持续时间,您可以手动使用JS setInterval
。我很确定这是幕后花絮。
编辑:soundManager
提供了一个名为whileplaying
的事件,但它不是soundManager
的功能。 whileplaying
是使用soundManager
创建的声音对象实例的功能。我希望这是有道理的。
因此,如果您想使用whileplaying
,则可以使用将事件附加到声音对象的createSound方法,也可以获取声音的实例,并使用带有选项的sound.play
方法,只需检查已发送给我的the demo。我认为您已经在用户单击播放按钮时调用了此功能或类似功能。
//From the demo page as you can see s is sound.
s.play({
whileplaying: function() {
// demo only: show sound position while playing, for context
soundManager._writeDebug('position = ' + this.position);
},
onfinish: function() {
// when the sound finishes, play it once more to show that the listener does not fire.
soundManager._writeDebug('Playing once more, onPosition() should not fire');
this.play({
onfinish: function() {
soundManager._writeDebug('"' + this.id + '" finished.');
}
});
}
});
编辑第二条评论:不确定何时呼叫该
css
。假设您已成功附加whileplaying
事件。该代码试图找到播放器的进度条,但看起来与您的HTML结构不同。下面的选择器应该可以帮您。 $("a.sm2_link.sm2_playing") // finds the active (playing) link
.closest("div.post-entry") // finds the parent element for both player and progress
.find("div.progBar") //finally finds progress bar now you can change the width
.css("width", /*YOUR CALCULATION HERE*/);
从理论上讲,您只能在页面上使用
$("div.progBar")
,但是如果您在一个页面中有多个玩家,则找到相对于玩家的内容会有所帮助。关于javascript - 如何为soundmanager2(inlineplayer)添加歌曲进度条?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27704829/