gpt4 book ai didi

html5-audio - HTML5 音频播放器持续时间显示 Nan

转载 作者:行者123 更新时间:2023-12-03 15:17:46 24 4
gpt4 key购买 nike

我刚开始学习 HTML5,并且正在使用 JQuery 浏览 HTML5 音频播放器。我用播放列表编写了一个播放器,一切正常,除了我的输入范围 slider 不起作用的持续时间。当我调试时,我发现我的持续时间向我显示 NAN。我正在设置歌曲初始化后的持续时间。

这是我的 JS 代码

jQuery(document).ready(function() {

container = $('.container');
playList = $('#playlist');
playListSong = $('#playlist li');
cover = $('.cover');
play = $('#play');
pause = $('#pause');
mute = $('#mute');
muted = $('#muted');
close = $('#close');

song = new Audio('music/Whistle-Flo-Rida-Mp3-Download.mp3','music/Whistle-Flo-Rida-Mp3-Download.mp3');

var canPlay = song.canPlayType('audio/mpeg;');
if (canPlay) {
song.type= 'audio/mpeg';
song.src= 'music/Whistle-Flo-Rida-Mp3-Download.mp3';
}

playListSong.click(function(){

$('#close').trigger('click');
window["song"] = new Audio('music/'+$(this).html()+'.mp3','music/'+$(this).html()+'.mp3');

$('#play').trigger('click');

});

play.live('click', function(e) {

e.preventDefault();
song.play();
//cover.attr("title", song.duration);
$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""><span>k</span></a>');

$('#close').fadeIn(300);
$('#seek').attr('max',song.duration);
});

pause.live('click', function(e) {
e.preventDefault();
song.pause();
$(this).replaceWith('<a class="button gradient" id="play" href="" title=""><span>d</span></a>');

});

mute.live('click', function(e) {
e.preventDefault();
song.volume = 0;
$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""><span>o</span></a>');

});

muted.live('click', function(e) {
e.preventDefault();
song.volume = 1;
$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""><span>o</span></a>');

});

$('#close').click(function(e) {
e.preventDefault();
container.removeClass('containerLarge');
cover.removeClass('coverLarge');
song.pause();
song.currentTime = 0;
$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""><span>d</span></a>');
$('#close').fadeOut(300);
});



$("#seek").bind("change", function() {
song.currentTime = $(this).val();
$("#seek").attr("max", song.duration);
});

song.addEventListener('timeupdate',function (){
curtime = parseInt(song.currentTime, 10);
$("#seek").attr("value", curtime);
});

});

当我点击播放列表歌曲时,持续时间始终为 NAN,但默认情况下我设置了一首歌曲,当我点击播放按钮时直接在页面加载时,持续时间可以正常工作。它从不适用于播放列表歌曲。

最佳答案

加载元数据后,使用 loadedmetadata 事件监听器获取音频的持续时间。执行类似以下代码的操作:

var audio = new Audio();
audio.src = "mp3/song.mp3";
audio.addEventListener('loadedmetadata', function() {
console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds.");
audio.play();
});

关于html5-audio - HTML5 音频播放器持续时间显示 Nan,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10868249/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com