スワイプ操作による音声再生

スマホでスワイプ操作を検知し、かつ、スワイプ操作で音声を再生させたい。

まず前提として、JavaScriptではスワイプジェスチャーのイベントがない。

スワイプを検知してくれるHammerjsを使う。

hammerjs.github.io

余談だがHammerという名前は、MCハマーからきているのだろうか？

サイトのアイコンがMCハマーっぽいんだが。

それはともかくとして、スワイプイベントをバインドする。

var _container = document.getElementById('container');
var mc = new Hammer.Manager(_container, {
  recognizers:[
    [Hammer.Swipe,{
      direction: Hammer.DIRECTION_ALL
    }]
  ]
});
mc.on('swipe',function(){
  var _audio = new Audio();
  _audio.src = 'music.mp3';
  _audio.play();
});

スワイプを検知することはできたが、その後、音声再生でエラーが発生してしまう。

Uncaught (in promise) DOMException

デバッグしてみると、Hammerjsにおけるスワイプはユーザーのタッチと認識しないようなので音声再生されないようだ。

解決方法としてタップのタイミングで無音の音声を再生させ、スワイプで音声だけ変更を加えるという荒技を実装する。

無音の音声を再生するに当たって、ios-unlock-testレポジトリにあるwa.jsを利用する。

github.com

var _container = document.getElementById('container');
var mc = new Hammer.Manager(_container, {
  recognizers: [
    [Hammer.Swipe,{
      direction: Hammer.DIRECTION_ALL
    }],
    [Hammer.Tap]
  ]
});
mc.on('tap',function(){
  wa.loadFile('./hoge.mp3', function(buffer) {
  });
  wa.playSilent();
});
mc.on('swipe',function(){
  wa.play('./hoge.mp3');
});

まずタップイベントで音声再生自体はできるので、タップして無音の音声を再生させる。

その次にスワイプを検知したら音声だけ変更を加える。

スワイプが完了するまで、ずーっと無音の音が再生しつづけるわけだが、短時間なので、この際、目をつぶるしかないかと思っている。