2

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

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

这是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 链接使用这种格式，进度条位于下方：

<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").css('width', ((this.position/this.duration) * 100) + '%');代码调整宽度的 div。

在此先感谢您的帮助。

4

2 回答 2

5

逻辑似乎很好 - 您需要在播放曲目时调用修改宽度片段，使用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
    }
});
于 2013-08-16T13:10:41.167 回答
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');
        }
    });
于 2013-08-23T18:30:00.790 回答