How can I constantly update the duration of this mp3 file I'm playing with JS? The progress bar does not work_问答_开发者

This is script from an audio player. I got from the Jquery cookbook that I can't seem to get working. I'm really stumped and would appreciate any help.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>


<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-        ui.css" rel="stylesheet" type="text/css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">          </script>
</head>

<body>

<script>


var $audio = $('audio');
console.log($audio);
var audioEl = $audio[0];
console.log(audioEl);
var secondsTotal = audioEl.currentTime;
console.log(secondsTotal);
var audio = {
currentTime: 0,
duration: secondsTotal,
volume: 0.5,
set: function(key, value) {
this[key] = value; 
try { audioEl[key] = value; } catch(e) {}



    if (key != 'currentTime') {
    $audio.trigger('timeupdate');
    }
    if (key != 'volume') {
    $audio.trigger('volumechange');
    }
    },
    play: function() {
    audioEl.play && audioEl.play();
    },
    pause: function() {
    audioEl.pause && audioEl.pause();
    }
    };
    console.log(audio);
    $audio.bind('timeupdate', function() {
    audio.currentTime = audioEl.currentTime;
    });
    audio.set('currentTime', 0);
    audio.set('volume', 0.5);

    //end compatibility layer

    //play pause button


    var $audio = $('audio'), audioEl = $audio[0];
    var audio = {
    currentTime: 0,
    duration: secondsTotal,
    volume: 0.5,
    set: function(key, value) {
    this[key] = value;
    try { audioEl[key] = value; } catch(e) {}
    if (key == 'currentTime') {
    $audio.trigger('timeupdate');
    }
    if (key == 'volume') {
    $audio.trigger('volumechange');
    }
    },
    play: function() {
    audioEl.play && audioEl.play();
    },
    pause: function() {
    audioEl.pause && audioEl.pause();
    }
    };

    $audio.bind('timeupdate', function() {
    audio.currentTime = audioEl.currentTime;
    });
    audio.set('currentTime', 0);
    audio.set('volume', 0.5);

    //end compatibility layer

    //play pause button


    $('.mplayer .playpause').click(function() {
    var player = $(this).parents('.mplayer');
    if (player.is('.paused')) {
    $('.mplayer').removeClass('paused');
    audio.play();
    } else {
    $('.mplayer').addClass('paused');
    audio.pause();
    }
    return false;
    })
    .hover(function() { $(this).addClass('ui-state-hover'); },
    function() { $(this).removeClass('ui-state-hover'); })
    .focus(function() { $(this).addClass('ui-state-focus'); })
    .blur(function() { $(this).removeClass('ui-state-focus'); });
    $('.mplayer').addClass('paused');


    // current and total time labels

    function minAndSec(sec) {
    sec = parseInt(sec);
    return Math.floor(sec / 60) + ":" + (sec % 60 < 10 ? '0' : '') +
    Math.floor(sec % 60);
    }
    $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
    $('.mplayer .duration').text(minAndSec(secondsTotal));
    $audio.bind('timeupdate', function(event) {
    $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
    });

    // slider

    $('.mplayer .track').slider({
    range: 'min',
    max: audio.duration,
    slide: function(event, ui) {
    $('.ui-slider-handle', this).css('margin-left',
    (ui.value < 3) ? (1 - ui.value) + 'px' : '');
    if (ui.value >= 0 && ui.value <= audio.duration) {
    audio.set('currentTime', ui.value);
    }
    },
    change: function(event, ui) {
    $('.ui-slider-handle', this).css('margin-left',
    (ui.value < 3) ? (1 - ui.value) + 'px' : '');
    }
    })
    .find('.ui-slider-handle').css('margin-left', '0').end()
    .find('.ui-slider-range').addClass('ui-corner-left').end();
    $audio.bind('timeupdate', function(event) {
    $('.mplayer .track').bind(function() {
    if ($(this).slider('value') != audio.currentTime) {
    $(this).slider('value', audio.currentTime);
    }
    });
    $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
    });

    //
    var secondsCached = 0, cacheInterval;
    $('.mplayer .track').progressbar({
    value: secondsCached / secondsTotal * 100
    })
    $('.mplayer .track').find('.ui-progressbar-value').css('opacity', 0.2).end();
    cacheInterval = setInterval(function() {
    secondsCached += 2;
    if (secondsCached > secondsTotal) clearInterval(cacheInterval);
    $('.mplayer .track.ui-progressbar').progressbar('value', secondsCached / secondsTotal * 100);
    }, 30);

    //volume control

    $('.mplayer .volume').slider({
    max: 1,
    orientation: 'vertical',
    range: 'min',
    step: 0.01,
    value: audio.volume,
    start: function(event, ui) {
    $(this).addClass('ui-slider-sliding');
    $(this).parents('.ui-slider').css({
    'margin-top': (((1 - audio.volume) * -100) + 5) + 'px',
    'height': '100px'
    }).find('.ui-slider-range').show();
    },
    slide: function(event, ui) {
    if (ui.value >= 0 && ui.value <= 1) {
    audio.set('volume', ui.v开发者_StackOverflow中文版alue);
    }
    $(this).css({
    'margin-top': (((1 - audio.volume) * -100) + 5) + 'px',
    'height': '100px'
    }).find('.ui-slider-range').show();
    },
    stop: function(event, ui) {
    $(this).removeClass('ui-slider-sliding');
    var overHandle = $(event.originalEvent.target)
    .closest('.ui-slider-handle').length > 0;
    if (!overHandle) {
    $(this).css({
    'margin-top': '',
    'height': ''
    }).find('.ui-slider-range').hide();
    }
    },
    change: function(event, ui) {
    if (ui.value >= 0 && ui.value <= 1) {
    if (ui.value != audio.volume) {
    audio.set('volume', ui.value);
    }
    }
    }
    })
    .mouseenter(function(event) {
    if ($('.ui-slider-handle.ui-state-active').length) {
    return;
    }
    $(this).css({
    'margin-top': (((1 - audio.volume) * -100) + 5) + 'px',
    'height': '100px'
    }).find('.ui-slider-range').show();
    })
    .mouseleave(function() {
    $(this).not('.ui-slider-sliding').css({
    'margin-top': '',
    'height': ''
    }).find('.ui-slider-range').hide();
    })
    .find('.ui-slider-range').addClass('ui-corner-bottom').hide().end();





$('.mplayer').each(function() {
$('.bg:first', this).css('opacity', 0.7);
$('.bg:last', this).css('opacity', 0.3);
})
$('.mplayer .rod').css('opacity', 0.4);
$('.mplayer .hl').css('opacity', 0.25);
$('.mplayer .hl2').css('opacity', 0.15);
});

</script>

You should try setInterval(). setInterval will call a method every certain amount of milliseconds. You can use setInterval to call a method that checks the currentTime of the song playing.

Example

setInterval(checkSongTime, 1000);

function checkSongTime(){
// code to check the current time of the song and to display it
}

Tip: "1000" is the amount of milliseconds, and it also equals 1 second, therefore your time will be updated once every second.

How can I constantly update the duration of this mp3 file I'm playing with JS? The progress bar does not work

精彩评论

关注公众号

热门标签

图文推荐

How can I constantly update the duration of this mp3 file I'm playing with JS? The progress bar does not work

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：