・・・

秘密っす。

秘密っす。

秘密っす。

今日は秘密の作業を行っていました。

え？どんな作業かって？

え？聞いてないって？

聞いてようが聞いてまいが秘密です。

✌('ω'✌ )

編集画面やそのほかの画面への音の組み込み作業が終わりました。この音再生ライブラリがめっちゃ便利で作業がはかどりました。githubに上げようかしら・・・

本日を持って、5日間に渡って作業してきた音の再生作業が完了しました。

あとは”秘密の作業”を残すのみとなりました。こちらは5日もかからないと思うので、2月頃にいよいよアプリがリリース出来そうです。

今回は、昨日作成した音再生ライブラリを使って、ガワネイティブアプリに音を組み込んでいました。

音再生ライブラリの使い勝手が良く、効率よく音を組み込むことが出来ました。

吾輩はやれば出来る子である。  
　　　　∩∩ 
　　　（´･ω･） 
　　 ＿|　⊃／(＿＿_ 
　／　└-(＿＿＿_／ 
　￣￣￣￣￣￣￣

今日はタイトル画面とテキスト漫画一覧画面に組み込んだので、明日は編集画面やそのほかの画面に組み込みます。明日には音の組み込み作業は終了しそうです。

Web Audio APIによるmp3の簡易再生ライブラリが完成しました！

複数の音の同時再生に対応しています！！

sound.js

if (typeof g_audioContext === 'undefined') {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    g_audioContext = new AudioContext();
    loadSound = function(url, keyName, fn) {
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';
        // Decode asynchronously
        request.onload = function() {
            g_audioContext.decodeAudioData(request.response, function(buffer) {
                fn(keyName, buffer);
            });
        }
        request.send();
    };
    getScriptParam = function(name) {
        var scripts = document.getElementsByTagName('script');
        var src = scripts[scripts.length - 1].src;
        var query = src.substring(src.indexOf('?') + 1 );
        var params = query.split('&');
        var result = new Object();
        for(var i = 0; i < params.length; i++) {
            var keyValue = params[i].split( '=' );
            if (name == keyValue[0]) {
                return keyValue[1];
            }
        }
    };
    g_sounds = {};
    playSound = function(name) {
        if (name in g_sounds) {
            g_sounds[name]();
        }
    }
}
var tmpName = getScriptParam('name');
loadSound('https://minnano.app/sound/' + tmpName, tmpName, function(keyName, buffer) {
    g_sounds[keyName] = () => {
        var source = g_audioContext.createBufferSource();
        source.buffer = buffer;
        source.connect(g_audioContext.destination);
        source.start(0);
    };
});

sound.jsファイル内の ‘https://minnano.app/sound/’ はmp3ファイルの置いてある場所です。環境に合わせて書き換えて下さい。

例えば kachi.mp3 と ok.mp3 の2つのファイルがあった場合、以下のように name に ファイル名を指定してJSファイルを読み込みます。

<script type="text/javascript" src="sound.js?name=kachi.mp3"></script>
<script type="text/javascript" src="sound.js?name=ok.mp3"></script>

その後、JavaScriptから任意の場所で playSound(‘kachi.mp3’) や playSound(‘ok.mp3’) と呼べば、それぞれの音が鳴ります！

3ファイル以上の場合も、同様の方法でscriptタグを追加すればOKです！！

便利！ヽ(´▽｀)ノﾜｰｲ

音鳴りました。単純にコードミスだったようです。

｡･ﾟ･(ﾉ∀`)･ﾟ･｡

以下コードを記述した上で、JavaScriptから任意の場所でplaySound()を呼べば音が鳴ります。

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var g_audioContext = new AudioContext();
loadSound = function(url, fn) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    // Decode asynchronously
    request.onload = function() {
        g_audioContext.decodeAudioData(request.response, function(buffer) {
            fn(buffer);
        });
    }
    request.send();
};
function playSoundBuffer(buffer) {
    var source = g_audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(g_audioContext.destination);
    source.start(0);
}
var g_soundBuffer = null;
loadSound('https://minnano.app/textmanga/assets/sound/kachi.mp3', function(buffer) {
    g_soundBuffer = buffer;
});
function playSound() {
    playSoundBuffer(g_soundBuffer);
}

mp3は絶対パスで指定しています。

‘https://minnano.app/textmanga/assets/sound/kachi.mp3’

の部分を変えて下さい。

しかし、これだと1種類の音しか鳴りませんね。いろんな音を鳴らしたいです。

｡･ﾟ･(ﾉ∀`)･ﾟ･｡

明日は、複数音源の場合の対応を考えようと思います。

今回はガワネイティブアプリで音の再生作業を行いました。

まずは、せっかくガワネイティブアプリなのでアプリ側での音の再生に挑戦しましたが、クライアント側のJSにより任意のタイミングで音を鳴らしたい場面が多々あり、またWeb側だと、Webへアクセスした後に音が鳴りずれるため、アプリ側での再生は諦めました。

そこで Web Audio API という、HTML5 でのサウンドライブラリを使うことにしました。新しいライブラリなのできっとより洗練されているのでしょう。

それで、JSによりmp3のファイル名を指定して簡単に音を鳴らせるメソッドを作ろうとました。が、webからは鳴るんですがアプリから使おうとすると何故か音がなりません。

ちゃんと音がなるコードが出来たら公開しようと思います。

今日は原因調査で終わってしまいました・・・