TypeError JavaScript Audio File

Question

Я создал свой собственный музыкальный проигрыватель, который использует некоторые из моих собственных формул для расчета длительности трека и все такое.Вы можете увидеть ошибку NaN.Извините за низкое качество gif.

Это сделано в javascript, я хочу поделиться им с сообществом открытого исходного кода, превратив его в плагин илипоэтому и не представляет никаких явных проблем, кроме раздражающей ошибки каждый раз, когда вы проигрываете песню.

TypeError - Не удалось установить свойство 'currentTime' для 'HTMLMediaElement': предоставленное двойное значение не являетсяконечный.

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 (), если это целое число, make

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;