HTML5 Range功能在移动设备上被破坏

Question

我在iOS手机上测试网站时遇到了一些麻烦（包括safari和chrome）。

我有一个HTML5音频，一个播放按钮和一个音量范围输入。该脚本在桌面（所有浏览器）上运行良好，但是，在我的iPad / iPhone上，我可以移动滑块的旋钮，但音量不会改变。会是什么呢？我四处寻找答案。

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

我已经测试了这个确切的代码（音频文件URL除外），并且它再次适用于桌面而不是移动设备。有任何想法吗？

Answer 1

在ios上卷是只读的

检查已知问题

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

Answer 2

尽管derp对于只读限制是完全正确的，但有一种方法可以使用WebAudio API控制html5元素的体积。请参考以下question