[Android] Android 4.3 の標準ブラウザとChromeでSoundJSを使って音を鳴らしたい

2017/02/9

こんにちは。きんくまです。

タイトルの通り今回は、「Android 4.3 の標準ブラウザとChromeでSoundJSを使って音を鳴らしたい」です。

SoundJSは音を鳴らすライブラリ。これです。
>> SoundJS

今回PreloadJSも使ってるのでこちらも。こちらはあらかじめリソースを読み込んでおくライブラリです。
>> PreloadJS

で、Chromeだと鳴るんだけど、標準ブラウザだとうまく鳴らなかったので、いろいろと調べたことをまとめてメモします。
先に結論を書いてしまうと

Android標準ブラウザでは、HTMLAudioPluginを使って、音を1つだけ鳴らす

SoundJSは Pluginとして、いくつかのものが登録できます。

– createjs.WebAudioPlugin,
– createjs.HTMLAudioPlugin
– createjs.FlashAudioPlugin

WebAudioAPI, Audioタグ, Flash代替版　ですね。

それで、ドキュメントを読むと WebAudioとAudioタグをデフォルトで読み込むよと書いてあります。
>> Sound Class – Plugins

Android標準ブラウザでも両方とも対応しているっぽくてWebAudio版も読み込みます。
こんなコードを書くと両方とも supported! なんて出ます。

if(createjs.WebAudioPlugin.isSupported){
    console.log('web audio supported!');
}else{
    console.log('web audio not supported');
}
if(createjs.HTMLAudioPlugin.isSupported){
    console.log('html audio supported!');
}else{
    console.log('html audio not supported');
}

が、WebAudioでは音は鳴らないっぽいです、、、。うわ！サポートしないくせに！ダメってフラグが立っていれば、、、。
音はならないくせにWebAudioプラグインを優先的に読み込んでいるので、なりません。
もっと正確にいうと、なぜか短い音は鳴るという謎仕様です。時間が長くなると無音になって、エラーも出ない、、。このあたりがハマりどころですなー。

最初原因が全くわからず、mp3のエンコード方法をステレオからモノラルにしてみたり、ビットレートを低くして書き出してみて試したのは内緒です。

なので、HTMLAudioPluginだけを明示して書いてあげます。

createjs.Sound.registerPlugins([
    createjs.HTMLAudioPlugin
]);

ただPCやiOS、Android版ChromeはWebAudioでも問題なく動いているので、Android標準ブラウザだけこの挙動にしたいです。
（デフォルトでWebAudioPlugin、HTMLAudioPluginは読み込む挙動だから書かなくてもよい）

標準ブラウザの判定はUserAgentでできるっぽいです。
>> How to detect the stock Android browser

これを使って、if文で分岐してあげます。

あと、Audioタグは1ページで同時に1つだけしか音を鳴らせない仕様っぽいので、例えばBGMと効果音（SE）を同時に鳴らすのはムリ！
なので、Android標準ブラウザでは、BGMだけを鳴らして、他は効果音を同時に鳴らす、（ or 効果音だけならすとか）という感じの仕様になると思います。
（Android版Chromeは同時にならせる！スバラしいっ！）

それで、このあたりをまとめて書いたサンプルコードが下のものとなります。

main.js


var androidDefaultBrowserChecked = false;
var isAndroidDefaultBrowser = false;
var loadQueue = new createjs.LoadQueue();
loadQueue.installPlugin(createjs.Sound);

//PlayButtonは読み込み時は display:none; だと思ってくださいまし
var playButton = document.getElementById('playButton');

var seSoundRef;
var bgmSoundRef;

//ファイル名をIDにしちゃってますがその辺は変えてください
var SE_ID = "se_filename";
var BGM_ID = "bgm_filename";

//original
//http://stackoverflow.com/questions/14403766/how-to-detect-the-stock-android-browser
function checkAndroidBrowser(){
    if(androidDefaultBrowserChecked){
        return isAndroidDefaultBrowser;
    }
    var navU = navigator.userAgent;

    // Android Mobile
    var isAndroidMobile = navU.indexOf('Android') > -1 &&
                          navU.indexOf('Mozilla/5.0') > -1 &&
                          navU.indexOf('AppleWebKit') > -1;

    // Apple webkit
    var regExAppleWebKit = new RegExp(/AppleWebKit\/([\d.]+)/);
    var resultAppleWebKitRegEx = regExAppleWebKit.exec(navU);
    var appleWebKitVersion = (resultAppleWebKitRegEx === null ? null : parseFloat(regExAppleWebKit.exec(navU)[1]));

    // Chrome
    var regExChrome = new RegExp(/Chrome\/([\d.]+)/);
    var resultChromeRegEx = regExChrome.exec(navU);
    var chromeVersion = (resultChromeRegEx === null ? null : parseFloat(regExChrome.exec(navU)[1]));

    // Native Android Browser
    isAndroidDefaultBrowser =  isAndroidMobile && (appleWebKitVersion !== null && appleWebKitVersion < 537)
        || (chromeVersion !== null && chromeVersion < 37);

    androidDefaultBrowserChecked = true;

    return isAndroidDefaultBrowser;
}

function setupSoundJS(){
    if(isAndroidDefaultBrowser){
        console.log('register plugin');
        createjs.Sound.registerPlugins([
            createjs.HTMLAudioPlugin
        ]);
    }
    createjs.Sound.alternateExtensions = ["mp3"];
}

function loadSound(){
    loadQueue.on("complete", onSoundLoad, this);
    loadQueue.loadFile({id:SE_ID, src:"sound/" + SE_ID + ".mp3"}, false);
    loadQueue.loadFile({id:BGM_ID, src:"sound/" + BGM_ID + ".mp3"}, false);
    loadQueue.load();
}

function onSoundLoad(e){
    loadQueue.off("complete", onSoundLoad);
    showButton();
}

function playSound(){
    if(isAndroidDefaultBrowser == false){
        seSoundRef = createjs.Sound.play(SE_ID);
    }
    bgmSoundRef = createjs.Sound.play(BGM_ID);
}

function showButton(){
    playButton.style.display = 'block';
}

function init(){
    checkAndroidBrowser();
    setupSoundJS();
    loadSound();
}

playButton.addEventListener('click', function(){
    playSound();
});

init();

console.log('default browser? =' + isAndroidDefaultBrowser);

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/sample.css">
    <title>Sample</title>
</head>
<body>

<div id="playButton">再生</div>

<script src="js/soundjs-0.6.2.combined.js"></script>
<script src="js/preloadjs-0.6.2.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>