Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/411.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在SoundManager2中添加歌曲进度条?_Javascript_Jquery_Progress Bar_Audio Streaming - Fatal编程技术网

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

Javascript 如何在SoundManager2中添加歌曲进度条?,javascript,jquery,progress-bar,audio-streaming,Javascript,Jquery,Progress Bar,Audio Streaming,我试图添加一个进度条来显示歌曲在播放过程中的位置。它只需要是一个简单的解决方案。我在网上找到了一些代码,它使用SoundManager2功能来调整div宽度以匹配歌曲的位置,但它似乎不起作用,不知道我哪里出了问题,任何帮助都将不胜感激 我已经使用了所有必需的Soundmanager2文件和歌曲播放工作。只有进度条才是问题所在 下面是javascript: soundManager.setup({ url: '/swf', preferFlash: false, waitForWindowLoad

我试图添加一个进度条来显示歌曲在播放过程中的位置。它只需要是一个简单的解决方案。我在网上找到了一些代码,它使用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>
其思想是#track1充当进度条的容器,.progBar是通过
$(“.progBar”).css('width',((this.position/this.duration)*100)+'%”调整宽度的div代码


提前感谢您的帮助。

逻辑似乎很好-您需要的是在播放曲目时调用modify width片段,使用
whileplaying
方法(我认为):


通过在
soundManager.createSound
下添加
whileplaying:
使其正常工作。我还添加了一个
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');
        }
    });

好的,我发现注释掉上面的javascript并测试音频仍然可以播放。它必须单独启动a links和soundmanager.js,这就解释了为什么progBar可能无法工作。我去掉了大部分javascript和文件链接,添加了
$(document).ready(function(){alert(“jqueryladed”);
,警报也可以工作。但是在
onready:function(){alert(“ready”);}下添加了另一个警报
以前的SoundManager代码,但firebug控制台显示SoundManager 2:Ready。
?困惑。我做错了什么?
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
    }
});
  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');
        }
    });