【HTML5】jsで「いま鳴ってる音」の再生を止める


Audio control

jsでパンパカパンパカ音やガイダンスを鳴らすウェブアプリケーションを作成していたのですが、
”いま鳴っている音を止めたい”
という事をしたい時に今鳴っている音源がどれかわからんというのと、そもそもどうやってとめるの?という2つの疑問がありました。

なお、音は今回Audioクラスのインスタンスでコントロールする事にしたのですが、一個だけでなく複数用意しておいて状況に応じて複数の音をハンドリングする必要がありました。

音を止める

まず音を止める方法は調べた所結構シンプルでして、再生中のインスタンスに対して
audio.pause();
audios.currentTime = 0;

というメソッドを実行すると良いらしい。
#二行目は状況に応じて分けですね

今鳴っている音をつきとめる

結局これ分からなかったので、力技に出た笑

StackOverFlowではjQueryのセレクタを使って全Audio要素にアクセスすればいいんじゃねー みたいなのがあったけど、今回少なかったので単純に全部配列に突っ込んでやったぜ

var audio1 = new Audio(“xxx1.mp4");
var audio2 = new Audio(“xxx2.mp4");
var audio3 = new Audio(“xxx3.mp4");
var audios = [audio1, audio2, audio3];

という事としておいて、何かボタンなどが押された際に
止める処理をループで全部とめてやれ、とやってみたら本当に止まりました。

けど、ふと思ったんですが常時なるaudioファイルが1つに定まるおであれば
currentSoundなどグローバルでもっておいて、それを止めてもいいかもって書いていて思ったけど、どうなんだろう。ださい?
ところでこういうのもAngularとか使うと幸せになったりするのかしら。 もっと勉強しないとです。

ちなみに最終的にこのようなfunctionになったでやんす

function cancelAudio(){
     for (var i = 0; i < audios.length; i++) {
          if(!audios[i].ended){
               audios[i].pause();
               audios[i].currentTime = 0;
          }
     };
     return false;
}

全然関係ない話ですが、js書いているとやっぱりSublimeTextを使いたくなりますね。
なんでなんでしょうか。

 

2014-12-11 | Posted in JavaScript - jQuery2 Comments » 


関連記事

コメント2件

 通りすがり | 2014.12.13 23:59

CustomElementsで1つのWebAudioAPIを通じて出力するAudio要素を作ればいいですね。

 altarfの管理人 | 2014.12.14 12:19

通りすがりの方、ご指摘ありがとうございます!
実際にそれをどう実現するかちょっとすぐにわからないのですが、時間を作って勉強したいと思います! 勉強になります。m(__)m

Comment





Comment



*