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