HTML5 Range 功能在移动设备上损坏

Posted 2023-03-14

技术标签:

【中文标题】HTML5 Range 功能在移动设备上损坏【英文标题】：HTML5 Range function broken on mobile 【发布时间】：2016-06-23 02:26:09 【问题描述】：

我在 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 除外），它同样适用于桌面而不是移动设备。有什么想法吗？

【问题讨论】：

【参考方案1】：

卷在 ios 上是只读的

检查已知问题

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

【讨论】：

有什么解决方法吗？谢谢你的回答。【参考方案2】：

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

【讨论】：