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);