jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2014.12. 2

スマホのdevicemotionでAudio.playを使う

Category:
Audio

加速度などに連動して音を鳴らすというのをやりたかったんですが、 スマホの仕様から単純にはいかなかったのでメモしておきます。

NG

以下の場合はスマホでは音が鳴りません。(PCでは鳴りました。)

var audio = new Audio();

audio.src = 'sample.mp3';

window.addEventListener('devicemotion', function() {
  audio.play();
}, false);

理由は以下だそうです。

Safari HTML5 Audio and Video Guide

英語読めませんが、どうやらスマホではユーザーの行動(clickとかtouchとか)に紐付かないと、Audio.playが有効にならないみたいです。

OK

あらかじめclickやtouchなどのイベントを介して、その中でaudio.load()を行っておけば、devicemotion内でも音を鳴らすことができました。

var button = document.getElementById('button'),
    audio = new Audio();

audio.src = 'sample.mp3';

button.addEventListener('click', function() {
  audio.load();
}, false);

window.addEventListener('devicemotion', function() {
  audio.play();
}, false);

このような演出を取り入れたい場合、デザイン上でなんらかのクリック動作をユーザーに促すように設計しておくとよさそうですね。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.