web-dev-qa-db-ja.com

HTML5オーディオの継続時間を取得するにはどうすればよいですか

私はhtml5を持っています<audio>タグはページにありますが、その継続時間を知るにはどうすればよいですか？

<audio controls="">
    <source src="p4.2.mp3">
</audio>
htmlaudioduration
30
hh54188

どのブラウザを使っていますか？一部のブラウザではdurationが正常に機能せず、先ほど述べたようにNaNを返します。

また、継続時間を取得する前に、オーディオファイルが読み込まれていることを確認していますか？

15
Ian Devlin
var au = document.createElement('audio');
au.addEventListener('loadedmetadata',function(){
    au.setAttribute('data-time',au.duration);
},false);
9
Fábio Zangirolami

2018ソリューション：

オーディオメタデータがまだ読み込まれていない場合は、undefinedまたはNaN（数値ではない）を取得します。したがって、一部の人々は、onloadedmetadataを使用して、オーディオファイルのメタデータが最初にフェッチされるようにすることを提案しました。また、ほとんどの人が言及しなかったことは、次のように[0]を使用してオーディオDOM要素の最初のインデックスをターゲットにする必要があることです。

-バニラJavascript：

var audio = $("#audio-1")[0];
audio.onloadedmetadata = function() {
  alert(audio.duration);
};

これが機能しない場合は、これを試してみてください。ただし、それほど信頼性が高くなく、ユーザーの接続に依存します。

setTimeout(function () {
    var audio = $("#audio-1")[0];
    console.log("audio", audio.duration);
}, 100);

-jQuery：

$(document).ready(function() {
   var audio = $("#audio-1")[0];
   $("#audio-1").on("loadedmetadata", function() {
       alert(audio.duration);
   }); 
});
8
AlexioVay

上記のコメントで、解決策はイベントハンドルをイベントのloadedmetadataにバインドすることであると述べました。これは私がそれをした方法です-

audio.onloadedmetadata = function() {
  alert(audio.duration);
};
7
ThisClark

「canplaythrough」イベントを使用してトラックの継続時間を取得しました。 2人のプレーヤーがいて、最初のプレーヤーが完了する2秒前に2番目のプレーヤーを停止したい場合があります。

$('#' + _currentPlayerID).on("canplaythrough", function (e) {   
    var seconds = e.currentTarget.duration;    
    var trackmills = seconds * 1000;
    var subTimeout = trackmills - 2000; //2 seconds before end

    //console.log('seconds ' + seconds);
    //console.log('trackmills ' + trackmills);
    //console.log('subTimeout ' + subTimeout);

    //Stop playing before the end of thet track
    //clear this event in the Pause Event
    _player2TimeoutEvent = setTimeout(function () { pausePlayer2(); }, subTimeout);

});
1
Patrick

Reactコンポーネントに期間をロードするのに苦労していたので、@ AlexioVayのソリューションに従って、Reactを使用している場合の答えは次のとおりです。

これは、オーディオコンポーネントクラスにrefを使用していることを前提としています。このクラスは、再生/一時停止ハンドラーのaudio要素をターゲットにする必要があります。

_<audio />_要素：

_<audio ref={audio => { this.audio = audio }} src={this.props.src} preload="auto" />
_

次にcomponentDidMount()で：

_componentDidMount() {

    const audio = this.audio

    audio.onloadedmetadata = () => {
        console.log(audio.duration)
        this.setState({
           duration: this.formatTime(audio.duration.toFixed(0))
        })
    }
}
_

そして最後にformatTime()関数：

_formatTime(seconds) {
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = seconds % 60
    return [h, m > 9 ? m : h ? '0' + m : m || '0', s > 9 ? s : '0' + s]
        .filter(a => a)
        .join(':')
}
_

これにより、オーディオsrcデータが読み込まれるとすぐに_h:mm:ss_形式の期間が表示されます。甘味。

1
joshuaiz

読み取りの終了を取得するには、イベント「onended」で「loop = false」である必要があります。 loop = trueの場合、onendedは機能しません;）

プレイリストを作成するには、次の曲を再生するために 'onended'イベントを使用するためにloop = falseを設定する必要があります。

継続時間中、スクリプトが正しく行われていれば、どこでも継続時間を回復できます。 「duration」の値がNaNの場合、ファイルはブラウザで見つかりません。値が 'Infinity' 'INF'の場合はストリーミングです。この場合、読み取り時間 'currentime'と比較して1分加算されます。 * I.Eはがらくたです。現在の時間は期間よりも長い場合があります。その場合、次のようにします。var duration =（this.currentime> this.duration）？ this.currenttime：this.duration;

それは（O_°）

1
Cherif

このようなイベントを使用する方が良いです...

ObjectAudio.onprogress  =function(){
    if(this.buffered.length){
    var itimeend = (this.buffered.length>1)? this.buffered.end(this.buffered.length-1):this.buffered.end(0);
    ....
        Your code here.......
    }
}
0
Cherif