javascript - TypeError JavaScript 音频文件

Question

我已经构建了我的自定义音乐播放器，它使用我的一些自定义公式来计算轨道持续时间和所有内容。您可以看到 NaN 错误。 对不起，低质量的 gif。

它是用 javascript 制作的，我想通过将其制作成插件等方式与开源社区分享，除了每次播放歌曲时出现烦人的错误外，没有任何明显的问题。

TypeError - 无法在“HTMLMediaElement”上设置“currentTime”属性:提供的 double 值是非有限值。

const myAudio = document.getElementById('myAudioElement'); //audio HTML5 element
const mySongNames = ['Týr - Ormurin Langi'.....];
const mySongFiles = ['audio0.mp3', 'audio1.mp3', 'audio2.mp3', 'audio3.mp3', 'audio4.mp3', 'audio5.mp3', 'audio6.mp3'];
const mySongLyrics = [....
];
const amountOfSongs = mySongNames.length - 1;
var playPauseCounter = 0; //determines if we play or pause
var songCounter = 0; //current song
var gradCounter = 0;

$('#player-background').css('padding', '12px');

function enableGradient() {
    $('#myPlayer').css('padding', '');
    $('#myPlayer').css('background', '');
    $('#player-background').addClass('gradient');
}

function disableGradient() {
    $('#player-background').removeClass('gradient');
    $('#player-background').attr('style', '');
    if (Cookies.get('mode') == 'light') {
        $('#player-background').css('padding', '12px');
        $('#myPlayer').css('background', '#FFF');
    } else {
        $('#player-background').css('padding', '12px');
        $('#myPlayer').css('background', '#000');
    }
}

$('#toggleImages').click(function(event) {
    event.preventDefault();
    $('#cbx').trigger('click');
});
$('#cbx').click(function() {
    if (gradCounter == 0 || gradCounter % 2 === 0) {
        enableGradient();
        gradCounter++;
    } else {
        disableGradient();
        gradCounter++;
    }
});

//here we deal with every second passed
//and update times accordingly
$('#myAudioElement').on('timeupdate', function() {
    //current time elapsed
    var currentMins = parseInt(Math.floor(myAudio.currentTime / 60));
    //total length of the song
    var totalMins = parseInt(Math.floor(myAudio.duration / 60));
    //number of seconds in current time
    var currentRest = parseInt(Math.floor(myAudio.currentTime - currentMins * 60));
    //number of seconds in total time
    var totalRest = parseInt(Math.floor(myAudio.duration - totalMins * 60));
    //set current time text
    $('#currentTime').text(`${currentMins} m ${(currentRest)} s`);
    //set total time text
    $('#totalTime').text(`${totalMins} m ${totalRest} s`);
    //width of the bar according to progress
    $('#myRange').val(myAudio.currentTime * 100 / myAudio.duration);
});
//deal with music ending
$('#myAudioElement').on('ended', function(event) {
    event.preventDefault();
    //if last song in playlist ended go to beggining
    if (songCounter == amountOfSongs) {
        songCounter = 0;
        myAudio.src = `music/${mySongFiles[songCounter]}`;
        myAudio.currentTime = 0;
        playAudio();
    } else if (songCounter < amountOfSongs) {
        songCounter++;
        myAudio.src = `music/${mySongFiles[songCounter]}`;
        myAudio.currentTime = 0;
        playAudio();
    }
});

function playAudio() {
    console.log('Attempting to play audio!');
    $('#myAudioElement').trigger('play');
    $('#title').text(mySongNames[songCounter]);
    $('#linkToLyrics').attr('href', mySongLyrics[songCounter]);
}

function pauseAudio() {
    console.log('Attempting to pause audio!');
    $('#myAudioElement').trigger('pause');
    $('#title').text(mySongNames[songCounter]);
    $('#linkToLyrics').attr('href', mySongLyrics[songCounter]);

}
//set volume according to input
$(document).on('input', '#myVolume', function() {
    $('#slider_value').html(parseInt($(this).val()));
    myAudio.volume = parseInt($(this).val()) / 100;
});
//set time in track according to input
$(document).on('input', '#myRange', function() {
    $('#slider_value').html(parseInt($(this).val()));
    myAudio.currentTime = (myAudio.duration * (parseInt($(this).val()) / 100));
});
//max volume
$('#volumeup').click(function() {
    $('#myVolume').val(100);
    myAudio.volume = 1;
});
//min volume
$('#volumedown').click(function() {
    $('#myVolume').val(0);
    myAudio.volume = 0;
});
//previous track
$('#back').click(function(event) {
    event.preventDefault();
    //if its still first track, go back to the last
    if (songCounter == 0) {
        songCounter = amountOfSongs;
        myAudio.src = `music/${mySongFiles[songCounter]}`;
        myAudio.currentTime = 0;
        playAudio();
        $('#playpause').removeClass('fas');
        $('#playpause').removeClass('fa-play');
        $('#playpause').addClass('fas');
        $('#playpause').addClass('fa-pause');
        playPauseCounter++;
        console.log(`Now Playing ${mySongFiles[songCounter]} with counter = ${songCounter}`);
    } else if (songCounter > 0) {
        songCounter--;
        myAudio.currentTime = 0;
        myAudio.src = `music/${mySongFiles[songCounter]}`;
        playAudio();
        $('#playpause').removeClass('fas');
        $('#playpause').removeClass('fa-play');
        $('#playpause').addClass('fas');
        $('#playpause').addClass('fa-pause');
        playPauseCounter++;
        console.log(`Now Playing ${mySongFiles[songCounter]} with counter = ${songCounter}`);
    }
});
//next track
$('#next').click(function(event) {
    event.preventDefault();
    if (songCounter == amountOfSongs) {
        songCounter = 0;
        myAudio.src = `music/${mySongFiles[songCounter]}`;
        myAudio.currentTime = 0;
        playAudio();
        $('#playpause').removeClass('fas');
        $('#playpause').removeClass('fa-play');
        $('#playpause').addClass('fas');
        $('#playpause').addClass('fa-pause');
        console.log(`Now Playing ${mySongFiles[songCounter]} with counter = ${songCounter}`);
    } else if (songCounter < amountOfSongs) {
        songCounter++;
        myAudio.src = `music/${mySongFiles[songCounter]}`;
        myAudio.currentTime = 0;
        playAudio();
        $('#playpause').removeClass('fas');
        $('#playpause').removeClass('fa-play');
        $('#playpause').addClass('fas');
        $('#playpause').addClass('fa-pause');
        console.log(`Now Playing ${mySongFiles[songCounter]} with counter = ${songCounter}`);
    }
});
//play and pause, change icon too
$('#playpause').click(function(event) {
    event.preventDefault();
    if (playPauseCounter === 0 || playPauseCounter % 2 === 0) {
        myAudio.src = `music/${mySongFiles[songCounter]}`;
        $('#playpause').removeClass('fas');
        $('#playpause').removeClass('fa-play');
        $('#playpause').addClass('fas');
        $('#playpause').addClass('fa-pause');
        playAudio();
    } else if (playPauseCounter === 1 || playPauseCounter % 2 === 1) {
        $('#playpause').removeClass('fas');
        $('#playpause').removeClass('fa-pause');
        $('#playpause').addClass('fas');
        $('#playpause').addClass('fa-play');
        pauseAudio();
    }
    playPauseCounter++;
});

Answer 1

无论在哪里输入 $(this).val() 如果它是一个整数就可以

parseInt($(this).val());

所以你可以避免 NaN 错误。

编辑:如下所示:

myAudio.volume = parseInt($(this).val()) / 100;
});

$(document).on('input', '#myRange', function() {
  $('#slider_value').html($(this).val());
  myAudio.currentTime = (myAudio.duration * (parseInt($(this).val()) / 100));
});

$('#volumeup').click(function(){
  $('#myVolume').val(100);
  myAudio.volume = 1;