Почему не срабатывает условие if

Есть музыкальный проигрыватель, который включает выбранную пользователем песню. При нажатии на кнопку play-pause запускается функция playPauseSong() , где происходит проверка. Если переменная песня Song не определена, то запускается функция playNewSong , где этой переменной присваивается значение аудио и после Song.play() она начинает играть. При повторно нажатии на play-pause условие, что переменная имеет значение audio игнорируется (происходит событие, что Song по прежнему не определена) и вместо Song.pause() повторно запускается песня. Подскажите, что я не так сделал. Вот код:

index.html:
<div class="wrp">
            <div class="player">
                <div class="framecounter">
                    <div class="curenttime">00:00</div>
                </div>
                <div class="nameSong">Название песни</div>
                <div class="bar">
                    <div class="setTime"></div>
                    <div class="range">
                        <div class="progress"></div>
                    </div>
                </div>
                <div class="navigation">
                    <div class="zerotime">00:00</div>
                    <div class="endtime">00:00</div>
                    <div class="ninesec" id="-1"><img src="img/ninesec.png"></div>
                    <div class="fivesec" id="-1"><img src="img/fivesec.png"></div>
                    <div class="twosec" id="-1"><img src="img/twosec.png"></div>
                    <div class="play-pause" id="0"><img class="play" src="img/play.png"></div>
                    <div class="play-again" id="-1"><img src="img/play-again.png"></div>
                    <input type="range" class="volume" min="0" max="100" value="100">
                </div>
            </div>
            <input id="input1" type="file">         
script.js:
$(document).ready(function(){ 
    let Song, volume = 1, songs = [0,'Песня_1'];
   function playNewSong(id) {
            let input1 = document.getElementById("input1"),  
            songpath = URL.createObjectURL(new Blob([input1.files[0]])),
            curtime, cur = -100, duration, nameaudio = document.getElementById('input1').files[0].name,
            Song = new Audio();
            Song.src = songpath;
            id_song = id;
            Song.onloadeddata = function(){
                duration = Song.duration;
                songs.push(duration);
                songs.push(nameaudio);
                Song.play();
                $('.player .nameSong').text(songs[3]);
                $('<img class="pause" src="img/pause.png">').replaceAll('.play');
                if ((parseInt(songs[2]/60) < 10)&&(parseInt(songs[2]%60) < 10)) {
                    $('.endtime').text('0'+parseInt(songs[2]/60)+':0'+parseInt(songs[2]%60));   
                }
                else if ((parseInt(songs[2]/60) < 10)&&(parseInt(songs[2]%60) >= 10)){
                    $('.endtime').text('0'+parseInt(songs[2]/60)+':'+parseInt(songs[2]%60));
                }
                else if ((parseInt(songs[2]/60) >= 10)&&(parseInt(songs[2]%60) < 10)){
                    $('.endtime').text(parseInt(songs[2]/60)+':0'+parseInt(songs[2]%60));
                }
                //$('.setTime').show();
                Song.volume = volume;
                Song.addEventListener('timeupdate', function() {
                    curtime = Song.currentTime;
                    cur = -((songs[2]-curtime)*100)/songs[2];
                    if ((parseInt(curtime/60) < 10)&&(parseInt(curtime%60) < 10)){
                        $('.curenttime').text('0'+parseInt(curtime/60)+':0'+parseInt(curtime%60));
                        }
                    else if ((parseInt(curtime/60) < 10)&&(parseInt(curtime%60) >= 10)){
                            $('.curenttime').text('0'+parseInt(curtime/60)+':'+parseInt(curtime%60));
                         }
                    else if ((parseInt(curtime/60) >= 10)&&(parseInt(curtime%60) < 10)){
                        $('.curenttime').text(parseInt(curtime/60)+':0'+parseInt(curtime%60));
                        }
                    else {
                            $('.curenttime').text(parseInt(curtime/60)+':'+parseInt(curtime%60));
                         }   
                    $('.progress').css({'left':cur+'%'});
                });
                $('.range').on('mouseenter', function() {
                    if (Song) {
                        let id = $('.play-pause').attr('id'),
                        offset = $(this).offset(),
                        dur = songs[2],
                        w = $(this).width();
                        $('.setTime').show();
                        $('.range').on('mousemove', function(e){
                            let x = e.pageX - offset.left,
                            xproc = (x*100)/w,
                            sec = (xproc*dur)/100;
                            $('.setTime').css({'left':x-10});
                             $('.setTime').text(parseInt(sec/60)+':'+parseInt(sec%60));
                             $('.range').on('click', function() {
                                xproc = xproc-100;
                                $('.progress').css({'left':xproc+'%'});
                                Song.currentTime = sec;
                             });
                        });
                    }
                });
                $('.range').on('mouseout', function() {
                    $('.setTime').hide();
                });
            }   
        }
    function playPauseSong() {
             if (Song) {
                    Song.pause();
                     $('<img class="play" src="img/play.png">').replaceAll('.pause');
                    
                if (Song.paused) {
                    Song.play();
                    Song.volume = volume;
                    $('<img class="pause" src="img/pause.png">').replaceAll('.play');       
                }
             }
             else { 
                playNewSong();
                $('<img src="img/pause.png">').replaceAll('<img src="img/play.png">');              
             }
        }   
    $('.play-pause').on('click', function(){
        playPauseSong();
    });
    
    $('.twosec').on('click', function() {
        if (Song.paused) {
        Song.currentTime = Song.currentTime - 2;
        Song.play();
            if (Song.currentTime < 0) {
                Song.currentTime = 0;
            }
        }
    });
        $('.volume').on('change', function() {
        let val = $(this).val();
        if (Song) {
            volume = val/100;
            Song.volume = volume;
        }
    });
});

Ответы (2 шт):

Автор решения: Nikita

Кусочек вашего кода с ошибкой:

function playPauseSong() {
  if (Song) {
    Song.pause();
    $('<img class="play" src="img/play.png">').replaceAll('.pause');

    if (Song.paused) {
      Song.play();
      Song.volume = volume;
      $('<img class="pause" src="img/pause.png">').replaceAll('.play');
    }
  } else {
    playNewSong();
    $('<img src="img/pause.png">').replaceAll('<img src="img/play.png">');
  }
}

Посмотрите внимательнее. if (Song), - если есть песня, то что вы делаете? Вы её ставите на паузу, потом проверяете что она на паузе (всегда будет срабатывать, до этого же поставили на паузу), и включаете песню. Если я правильно понимаю логику работы, то вот правильный код:

function playPauseSong() {
  if (Song) {
    if (Song.paused) {
      Song.play();
      Song.volume = volume;
      $('<img class="pause" src="img/pause.png">').replaceAll('.play');
    } else {
      Song.pause();
      $('<img class="play" src="img/play.png">').replaceAll('.pause');
    }
  } else {
    playNewSong();
    $('<img src="img/pause.png">').replaceAll('<img src="img/play.png">');
  }
}
→ Ссылка
Автор решения: Дима

Эх я Розиня. После последней объявленной переменной в playNewSong - Надо было точку с запятой ставить, а не запятую. Получается, переменная Song создавалась заново.

→ Ссылка