Почему не срабатывает условие 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 шт):
Кусочек вашего кода с ошибкой:
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 создавалась заново.