js

【Tone.js】iOSで音が鳴らない現象の対処

More than 1 year has passed since last update.

Tone.jsという、音を扱うためのjsフレームワークがあります。


Tone.js

https://github.com/Tonejs/Tone.js


かんたんにコードを書けるし、すぐ音が出てとても面白いのですが、iOS端末でページを見たときに、音が鳴らないことがあります。AndroidやPCは大丈夫なのに。

本記事ではその対処法を紹介します。

ちなみに動作環境は、iPod touch (iOS9.3) です。

たとえばtone.jsの基本的なコードとして、以下のような、「ボタンを押したら音がなる」ものを実装したとします。でもこれだとiOSでは音が鳴らないはずです。


index.html

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<button id="sound-on">SOUND ON</button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://tonejs.github.io/CDN/latest/Tone.min.js"></script>
<script>
var synth = new Tone.Synth().toMaster();
$("#sound-on").click(function() {
synth.triggerAttackRelease('A4', '4n');
});
</script>
</body>
</html>

原因は、synthオブジェクトを生成するタイミングが、「ユーザインタラクションによってではない」からです。


stack overflow - Simple oscillator, but no sound with web audio API on IOS

http://stackoverflow.com/questions/21413396/simple-oscillator-but-no-sound-with-web-audio-api-on-ios


つまり、ユーザインタラクションによってsynthオブジェクトを生成してやればよいので、js部分を次のように編集すればOKです。


index.html

    <script>

$("#sound-on").click(function() {
var synth = new Tone.Synth().toMaster();
synth.triggerAttackRelease('A4', '4n');
});
</script>