JS аудиоплеер: баг в андроид

109

04 сентября 2019, 15:50

<button onclick='playPause()'><i aria-hidden='true' id='myicon'/></button> 
<button onclick='player.volume = Math.min(player.volume * 1.2, 1)'><font size='+1'><i aria-hidden='true' class='fa fa-volume-up'/></font></button> 
<button onclick='player.volume /= 1.2'><font size='+1'><i aria-hidden='true' class='fa fa-volume-down'/></font></button>

Есть работающий аудиоплеер на JS. Всё работает, как положено (в десктопе), но: андроид в упор "не видит" предустановленную громкость (0.2) и запускает громкость выше (по ощущениям - 0.5). А при первом нажатии на volume up (+ громкости) вместо увеличения звука производит выполнение заданного значения: сбрасывает звук на 0.2. Далее всё работает, как надо. Баг происзодит только при первом пуске. И только в андроид. Где ошибка?

<script> 
var mysrc = &quot;http://радиостанция.mp3&quot;; 
var player = new Audio(mysrc);  
var myicon = document.getElementById(&quot;myicon&quot;); 
var current_volume = player.volume = 0.2; 
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){ 
	myicon.className = &quot;fa fa-play&quot;; 
}else{ 
	myicon.className = &quot;fa fa-spinner fa-pulse fa-1x fa-fw&quot;; 
	player.addEventListener(&#39;loadeddata&#39;, function(){ 
		myicon.className = &quot;fa fa-play&quot;; 
	}, false); 
} 
function playPause(){ 
	if(player.paused){ 
		player.play(); 
		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { 
			myicon.className = &quot;fa fa-spinner fa-pulse fa-1x fa-fw&quot;;  
			setTimeout(function(){ 
				myicon.className = &quot;fa fa-pause&quot;; 
				player.volume = current_volume; 
			}, 3000); 
		}else{ 
			myicon.className = &quot;fa fa-pause&quot;;  
		} 
	}else if(player.muted==true){ 
		player.muted=false; 
		player.volume = current_volume; 
		myicon.className = &quot;fa fa-pause&quot;;  
	}else{ 
		current_volume = player.volume; 
		player.muted=true; 
		myicon.className = &quot;fa fa-play&quot;;  
	}  
}  
</script>