0

I'm having some trouble testing a website on an iOS mobile (both safari and chrome).

I have an HTML5 audio, a play button and a range input for the volume. The script works great on desktop (all browsers), however, on my iPad/iPhone, I can move the slider's knob, but the volume doesn't change. What could it be? I've searched all around for the answer.

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;
}

I have tested this exact code (except for the audio file URL) and again, it works on desktop and not on mobile. Any ideas?

Nhan
  • 3,595
  • 6
  • 30
  • 38
Caio Frison
  • 3
  • 2

2 Answers2

0

Volume is read-only on ios

Check under known issues

http://caniuse.com/#feat=audio

derp
  • 2,300
  • 13
  • 20
0

Despite that derp is absolutely right about read-only restriction, there is a way to control volume of html5 element using WebAudio API. please refer to the following question

Alex Zheka
  • 566
  • 2
  • 11