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

Question

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

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

Answer 1

var au = document.createElement('audio');
au.addEventListener('loadedmetadata',function(){
    au.setAttribute('data-time',au.duration);
},false);

Answer 2

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

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

Answer 3

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(':')
}

h:mm:ssこれにより、オーディオ src データが読み込まれるとすぐに、形式のデュレーションが表示されます。甘味。

Answer 4

「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);

});

Answer 5

単に使用するaudioElement.duration

Answer 6

こんな風にイベントを利用した方がいいのでは・・・

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.......
    }
}