为啥 Safari Mobile 中无法播放网络音频 api 振荡器?
Posted
技术标签:
【中文标题】为啥 Safari Mobile 中无法播放网络音频 api 振荡器?【英文标题】:Why won't web audio api oscillator play in Safari Mobile?为什么 Safari Mobile 中无法播放网络音频 api 振荡器? 【发布时间】:2017-06-12 07:24:31 【问题描述】:我一直在尝试让振荡器在 ios 上的移动浏览器中播放(在 Chrome 或 Safari 中不起作用),但我正在苦苦挣扎。根据我所做的研究,我发现您必须在触摸事件上创建振荡器(甚至可能是上下文)。我在桌面上工作的是一个振荡器,它连接到增益节点并在跨度元素上的 mouseenter 事件上播放声音。然后在 mouseout 事件中,它会断开与 gain 节点的连接,以便在下一个 mouseenter 事件时再次连接,从而能够在每次将角色悬停在其上时创建新的声音。
$(".hover-letters span").on("touchend mouseenter", function()
audioVariables($(this));
);
$(".hover-letters span").on("touchstart mouseout", function()
oscillator.disconnect(gainNode);
);
function audioVariables(element)
resizeWindowWidth = parseInt($(window).width());
frequency = mouseX/(resizeWindowWidth/600);
type = element.parent().data("type");
sound();
var firstLetterInteraction = true;
function sound()
if (firstLetterInteraction === true)
audioCtx = new(window.AudioContext || window.webkitAudioContext)();
oscillator = audioCtx.createOscillator();
gainNode = audioCtx.createGain();
oscillator.start();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
oscillator.frequency.value = frequency;
oscillator.type = type;
firstLetterInteraction = false;
;
由于某种原因,声音无法在 IOS 上播放,也没有显示任何错误。我开始怀疑这是否可能作为 CaptureWiz 示例之类的示例:
How do I make javascript beep?
Web Audio API 网站上给出的示例:http://webaudioapi.com/samples/oscillator/ 在移动设备上不适合我。有人有什么想法吗?
【问题讨论】:
您能否编辑您的问题以向我们展示您迄今为止已经尝试过的内容,以便我们可以帮助调整代码? 问题已编辑以显示我到目前为止所做的尝试 【参考方案1】:这适用于振荡器
<script>
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
oscillator.type = 'sine';
oscillator.frequency.value = 300;
gainNode.gain.value = 7.5;
</script>
<button onclick="oscillator.start();">play</button>
【讨论】:
此代码不适用于 Safari iOS 11 bl.ocks.org/clhenrick/raw/1d5d49c7a6573ad6a7095518c393ae0b/… 我稍后会编辑它,谢谢这是iOS 11之前的旧帖子以上是关于为啥 Safari Mobile 中无法播放网络音频 api 振荡器?的主要内容,如果未能解决你的问题,请参考以下文章
在 Safari 和 Mobile Chrome 上以编程方式播放有声视频