LoginSignup
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-02

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

NG

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

var audio = new Audio();

audio.src = 'sample.mp3';

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

理由は以下だそうです。

英語読めませんが、どうやらスマホではユーザーの行動(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);

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3