onTimeUpdateプログレスバーにリンク

Question

私はここ数日間、別のJsFiddleの基礎を取り、それを私のものに取り入れようと努力してきました。私は音楽プレーヤーを作ろうとしていますが、JavaScriptでontimeUpdate関数を使用することに問題があります。これは私が現時点でで働いている機能である：

audio.on("timeupdate", function() { 
    $("#bar").attr("value", this.currentTime/this.duration); 
}); 

audioは<audio>要素を表す変数であり、#barは<progress>要素のidです。ここに私のバイオリンです：https://jsfiddle.net/4t2tf0af/5/

そして、ここで私が働いているからフィドルです：後者フィドル、で、http://jsfiddle.net/DCE6N/547/

今音楽を再生したとき、0と1の間の小数値にプログレスバーの更新私は成功することなく同じことをしようとしています。

Answer 1

私はいくつかの問題に気付きましたが、最初の質問に答えるために、「オーディオ」はdom要素なので、「オン」と呼ばれるものはありません。だから、仕事へのためにjqueryのタグでラップする必要があります。

$(audio).on("timeupdate", function() 
    { 
    $("#bar").attr("value", (this.currentTime/this.duration) * 100); 
    }); 

あなたは、元のフィドルを最大として「1」を持っていながら、あなたが「持っていたので、私はまた、100で値を掛けたことに気づくでしょう100 "となる。

フィドルの最後には、それが動作しないようにしていた文字がいくつかありました。

最後に、あなたがhttpsにアクセスしていた曲のためのプロトコルを設定するために必要な：

https://jsfiddle.net/4t2tf0af/8/

：

audio.setAttribute("src", "https://mp3red.co/stream/27942256/wintersleep-amerika.mp3" 

ここで私はあなたが試すことができることを微調整してきた更新フィドルです