如何不断更新此mp3文件的持续时间I'我在玩JS?进度条不起作用

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

本文关键字：JS 不起作用 mp3 更新何不断文件持续时间更新时间：2023-09-26

这是来自音频播放器的脚本。我从Jquery食谱中得知，我似乎无法工作。我真的被难住了，如果有任何帮助，我将不胜感激。

<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.value);
    }
    $(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>

您应该尝试setInterval((。setInterval将每隔一定的毫秒调用一个方法。您可以使用setInterval调用一个方法来检查歌曲播放的当前时间。

示例

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

提示："1000"是毫秒数，也等于1秒，因此您的时间将每秒更新一次。