HTML5 Bereich Funktion gebrochen auf Handy

Ich habe Probleme beim Testen einer Website auf einem iOS-Handy (Safari und Chrome).HTML5 Bereich Funktion gebrochen auf Handy

Ich habe ein HTML5-Audio, eine Play-Taste und einen Bereich Eingang für die Lautstärke. Das Skript funktioniert gut auf dem Desktop (alle Browser), aber auf meinem iPad/iPhone kann ich den Schieberegler verschieben, aber die Lautstärke ändert sich nicht. Was könnte es sein? Ich habe überall nach der Antwort gesucht.

HTML:

<a href="javascript:void(0);" onclick="play();">PLAY</a> 
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">

JS:

var mySound = new Audio(); 
var src1 = document.createElement("source"); 
src1.src = "mysound-file.mp3"; 
mySound.appendChild(src1); 

function play() { mySound.play(); } 

document.getElementById("volumeslider").addEventListener("input", function() { 
    changeVolume(); 
}, false); 

function changeVolume() { 
    mySound.volume = volumeslider.value/100; 
}

ich genau diesen Code getestet habe (mit Ausnahme der Audiodatei URL) und wieder, es funktioniert auf dem Desktop und nicht auf Handy, Mobiltelefon. Irgendwelche Ideen?

Quelle

2016-06-23 Caio Frison