如何在SoundManager2中添加歌曲进度条？

我正在尝试添加进度条以显示播放期间歌曲的位置。 它只需要一个简单的解决方案。 我在网上找到了一些代码，它使用SoundManager2 http://www.schillmania.com/projects/soundmanager2/function调整div宽度以匹配歌曲的位置，但它似乎没有工作，不确定我要去哪里错了，任何帮助将不胜感激。

我已经使用了所有必需的Soundmanager2文件和播放的歌曲工作。 这只是进度条的问题。

这是javascript：

soundManager.setup({ url: '/swf', preferFlash: false, waitForWindowLoad: true, onready: function() { var myTrack1 = soundManager.createSound({ id: 'trackOne', url: 'https://stackoverflow.com/questions/18273444/how-to-add-a-song-progress-bar-in-soundmanager2/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链接使用此格式，进度条位于下方：

 
Song1: Play 
  

CSS是：

 #track1 { background-color: #333333; height: 10px; margin-top: 10px; position: relative; width: 100%; } .progBar { background-color:#FFF; height:10px; } 

想法是＃track1充当进度条的容器，而.progBar是通过$(".progBar").css('width', ((this.position/this.duration) * 100) + '%');调整宽度的$(".progBar").css('width', ((this.position/this.duration) * 100) + '%'); 码。

在此先感谢您的帮助。

Answer 1

逻辑似乎很好 – 你需要的是在播放曲目时调用修改宽度片段，使用whileplaying方法（我认为）：

 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,}); $("li.a5 a").click(function(event){soundManager.play('trackOne');}); }, whileplaying: function() { $(".progBar").css('width', ((this.position/this.duration) * 100) + '%'); }, ontimeout: function() { // Uh-oh. SWF missing, Flash blocked or other issue } }); 

Answer 2

通过添加whileplaying:来使其工作whileplaying:在soundManager.createSound下。 我还添加了一个onfinish:将进度条重置为最后的0宽度。

  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'); } });