みかづきブログ その3

3ヶ月つづけてみました。

Web Audio API なら iOS でも OS の ボリュームに依存せず音量を0にできる

kimizuka.hatenablog.com

audioタグでは実現できませんが、Web Audio API をつかえば実装できます。

まず、以前つくった Web Audio API のサンプルをiOS用に書きかえます。

kimizuka.hatenablog.com


JavaScript

(function(win, doc) {
    
    "use strict";
    
    try {
        (function() {
            var ctx, gain, source, buffer, request;
            
            win.AudioContext = win.AudioContext || win.webkitAudioContext;
            ctx = new AudioContext();
            
            request = new XMLHttpRequest();
            request.open("GET", "http://jsrun.it/assets/5/1/t/k/51tkl.mp3", true);
            request.responseType = "arraybuffer";
            
            request.onload = function () {
                doc.addEventListener("click", function() {
                    source = ctx.createBufferSource();
                    gain   = ctx.createGainNode();
                    
                    // オーディオをデコード
                    ctx.decodeAudioData(request.response, function (evt) {
                        source.buffer = evt;
                            source.connect(gain);
                            gain.connect(ctx.destination);
                            source.noteOn(0);
                    });
                }, false);
            };
            
            request.send();
            
        })();
    } catch(e) {

    }
    
})(this, document);

DEMO


Safariでは、まだ古いメソッド名が生きているのでstartをnoteOnに書き換える等の対策をしないと動きません。これはiOS8 の Mobile Safariもしかりです。
ただしこの書き換えを行ってしまうと今度は逆にChromeで動かなくなってしまうので本当はうまく書かないといけないのですが、今回はSafariで動かすことに専念し、Chromeには涙をのんでもらうことにします。


でこのコードでオーディオの音量を0にすると、

(function(win, doc) {
    
    "use strict";
    
    try {
        (function() {
            var ctx, gain, source, buffer, request;
            
            win.AudioContext = win.AudioContext || win.webkitAudioContext;
            ctx = new AudioContext();
            
            request = new XMLHttpRequest();
            request.open("GET", "http://jsrun.it/assets/5/1/t/k/51tkl.mp3", true);
            request.responseType = "arraybuffer";
            
            request.onload = function () {
                doc.addEventListener("click", function() {
                    source = ctx.createBufferSource();
                    gain   = ctx.createGainNode();
                    
                    // オーディオをデコード
                    ctx.decodeAudioData(request.response, function (evt) {
                        source.buffer = evt;
                            source.connect(gain);
                            gain.connect(ctx.destination);
                            source.noteOn(0);
                            gain.gain.value = 0; // 追加
                    });
                }, false);
            };
            
            request.send();
            
        })();
    } catch(e) {

    }
    
})(this, document);

DEMO



iOSでみてもOSのボリュームに依存せずにボリュームを0にすることができます。
なので、ボリュームを0にする可能性がある際はWebAudioAPIで実装しておくと良いですね。



【追記: まとめました】kimizuka.hatenablog.com