如何在SoundManager2中添加歌曲进度条? [英] How to add a song progress bar in SoundManager2?
问题描述
我正在尝试添加进度条以显示播放期间歌曲的位置。它只需要一个简单的解决方案。我在网上找到了一些代码,它使用SoundManager2 http://www.schillmania.com/projects/soundmanager2/ 调整div宽度以匹配歌曲位置的功能但它似乎不起作用,不确定我哪里出错了,任何帮助都会受到赞赏。
I am trying to add a progress bar to show what position a song is at during playback. It only needs to be a simple solution. I found some code online, which uses SoundManager2 http://www.schillmania.com/projects/soundmanager2/ features to adjust a div width to match the song's position but it doesn't seem to be working, not sure where I am going wrong, any help would be appreciated.
我已经使用了所有必需的Soundmanager2文件和播放的歌曲。它只是进度条的问题。
I have used all the required Soundmanager2 files and playback of the songs work. It's only the progress bar which is the issue.
这里是javascript:
here is the javascript:
soundManager.setup({
url: '/swf',
preferFlash: false,
waitForWindowLoad: true,
onready: function() {
var myTrack1 = soundManager.createSound({
id: 'trackOne', url: 'msamples/beep-1.mp3', volume: 80, autoPlay: false,});
$(".progBar").css('width', ((this.position/this.duration) * 100) + '%');
$("li.a5 a").click(function(event){soundManager.play('trackOne');});
},
ontimeout: function() {
// Uh-oh. SWF missing, Flash blocked or other issue
}
});
HTML链接使用此格式,进度条位于以下位置:
The HTML links use this format and the progress bar sits below:
<li class="a5">Song1:
<a href="msamples/beep-1.mp3" title="Play" class="sm2_button">Play</a>
<div id="track1"><div class="progBar"></div></div>
</li>
CSS为:
#track1 {
background-color: #333333;
height: 10px;
margin-top: 10px;
position: relative;
width: 100%;
}
.progBar {
background-color:#FFF;
height:10px;
}
想法是#track1充当进度条和.progBar的容器是通过 $(。progBar)来调整宽度的div .css('width',((this.position / this.duration)* 100)+'%');
代码。
The idea is #track1 acts as the container for the progress bar and .progBar is the div which has it's width adjusted through the $(".progBar").css('width', ((this.position/this.duration) * 100) + '%');
code.
预先感谢您的帮助。
推荐答案
通过在 soundManager.createSound
下添加同时显示:
来实现它。我还添加了一个 onfinish:
来将进度条重置为 0
最后的宽度。
got it to work by adding the whileplaying:
under soundManager.createSound
. I also added an onfinish:
to reset the progress bar back to 0
width at the end.
soundManager.createSound({
id: 'mySound1',
url: 'msamples/beep-1.mp3',
whileplaying: function() {
$(".progBar").css('width', ((this.position/this.duration) * 100) + '%');
},
onfinish: function() {
$(".progBar").css('width', '0');
}
});
这篇关于如何在SoundManager2中添加歌曲进度条?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!