

monacaを用いて，体の動きに合わせて音楽がなるアプリを開発しています．  
現在，[こちら](https://docs.monaca.io/ja/sampleapp/tips/media/)のページの一番下のindex.htmlを参考にして，
`playAudio()`関数により音を出しています．  
しかし，体の動きに合わせてなるようにプログラムを組んでいるものの，  
`playAudio()`関数の実行が遅いため，音楽の再生が体の動きについていきません．  
0.5秒くらいの効果音をならせたいだけなのですが，  
より早く音を鳴らせる方法をご存知の方いらっしゃいませんか？

なお，上記URLで指しているプログラムはこちらになります：

  
  
  
  
Plain Project Skeleton

[code]

        <style type="text/css">
            body {
                background-image : url("images/omikuji-bg.png");
                background-repeat: no-repeat;
                background-position: center center;
                background-size : 100% 100%;
                background-attachment : fixed;
                margin : 0;
                padding : 0;
            }
    
            #hako {
                width : 100%;
                text-align : center;
                margin : 10% 0px;
                height : 80%;
                position : fixed;
                left : 0;
                top : 0;
            }
    
            #bottombar {
                position : absolute;
                left : 0px;
                bottom : 30px;
                width : 100%;
            text-align : center;
            }
    
        </style>
    
         <script type="text/javascript" src="components/loader.js"></script>
         <script type="text/javascript">
    
         //Variables to specify the sound sources. They are used to generate Media objects.
         var src1 = "koukaon1.mp3";
         var src2 = "koukaon2.mp3";
         var src3 = "koukaon3.mp3";
    
         //In order to use Media objects, these variables must be declared here. Their initial values are null (empty).
         var media1 = null;
         var media2 = null;
         var media3 = null;
    
    
        //In Android, it's necessary to specify the absolute path
         function getPath(){
             var str = location.pathname;
             var i = str.lastIndexOf('/');
             return str.substring(0,i+1);
         }
    
                 //Call "onDeviceReady" function when "deviceready" event of the Core Cordova Plugins completed.
         document.addEventListener("deviceready", onDeviceReady, false);
    
    
         function onDeviceReady(){
    
               alert("Loading Core Cordova Plugins is completed");
    
                           /*
                            Generating objects to play the sound effect.
                            1st argument [getPath() + src1] indicates the path of the sound file.
                            2nd and 3rd arguments defines a callback function when encounter success and failure respectively.
                           */
               media1 = new Media(getPath() + src1, onSuccess, onError);
               media2 = new Media(getPath() + src2, onSuccess, onError);
               media3 = new Media(getPath() + src3, onSuccess, onError);
    
        }
    
             if (typeof Windows != "undefined") {
    
                 window.alert = function(s) {
                     new Windows.UI.Popups.MessageDialog(s).showAsync();
                 }
             }
             function omikuji (){
    
                 var dice = Math.floor(Math.random() * 3);
    
                 var image_name;
    
                 //Play a different sound effect for each result.
                 if (dice == 0) {
                     image_name = "omikuji-daikichi.png";
    
                     media1.play();
                 } else if  (dice == 1) {
                     image_name = "omikuji-chuukichi.png";
    
                     media2.play();
                 } else {
                     image_name = "omikuji-hei.png";
    
                     media3.play();
                 }
    
                 document.getElementById("saisyo").setAttribute("style", "display : none;");
                 document.getElementById("kekka").src = "images/" + image_name;
                 document.getElementById("kekka").setAttribute("style", "display : inline;");
                 document.getElementById("button").src = "images/omikuji-btn-yarinaosu.png";
    
                 alert('The Fortune is out! What is the result?');
             }
    
         function onSuccess() {
              console.log("playAudio():Audio Success");
         }
    
         function onError(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
         }
    
         </script>
    </head>
    <body>
    
        <div id="hako">
            <img src="images/omikuji-box.png" width="160" id="saisyo" />
            <img src="" width="230" id="kekka" style="display : none;"/>
        </div>
        <div id="bottombar">
            <img src="images/omikuji-btn-hajimeru.png" onclick="omikuji()" width="160" id="button">
        </div>
    
    </body>
    
[/code]


CC BY-SA 3.0
2016-10-05T17:45:00.570
29378
2016-10-10T13:17:14.447
2016-10-09T22:59:34.347
15185
14786
question
android monaca html5 iphone cordova
monaca(phonegap)の高速な音声再生法


質問で示されたリンク先にはMediaプラグインを使ったサンプルが二つ載っていますが、それぞれの実装は微妙に異なります。

  * [「Cordova のメディア操作プラグインを使用した、音の再生」](https://docs.monaca.io/ja/sampleapp/tips/media/#using-core-cordova-plugins-media-api-to-play-sound)  
ボタンを押すと(playSound)、毎回 `new Media(...)` と `media.play(...)` を行う。

  * [「Cordova のメディア操作プラグインを使用した、効果音の再生」](https://docs.monaca.io/ja/sampleapp/tips/media/#using-media-api-to-play-sound-effects)  
あらかじめ `new Media(...)` をしておき、ボタンを押したときは `media.play()` のみを行う。

後者では `new Media(...)` で得られたインスタンスを使いまわすことで、2回目以降の再生では初期化が省略され、再生が素早く行えます。

一方今回のご質問では `playSound()` 関数が～という話をされているので、前者のサンプルを参考にされたのではないでしょうか。それで毎回
`playSound()` を呼び出しているとすると、毎回音声ファイルを読み込むことになりますから、余分なラグが生じる可能性があります。

手元では次のコードで検証しました。タップから再生までのラグもそうですが、連打してみると違いが分かりやすいかと思います。

[code]

    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
    
        <script>
            function getPath(){
                var str = location.pathname;
                var i = str.lastIndexOf('/');
                return str.substring(0,i+1);
            }
    
            var path = getPath() + "sound.wav";
            var media = null;
    
            function play (){
                media = new Media(path);
                media.play();
            }
    
            function play2 (){
                if(media == null)
                    media = new Media(path);
                media.play();
            }
        </script>
        <style>
        div { padding: 1em; border: 1px solid gray; background: #fee; }
        </style>
    </head>
    <body>
        <!-- イベント発生までのラグを減らすためにonclickではなくontouchstart -->
        <div ontouchstart="play()">毎回初期化</div>
        <div ontouchstart="play2()">一度だけ初期化</div>
    </body>
    </html>
    
[/code]

なお、ファイル読み込みなどの初期化が行われるのは最初に `media.play()`
した時です。再生せず初期化するメソッドは用意されていません。iOSでは[音量を絞って再生する](http://rebrandsoft.blogspot.jp/2014/10/how-
to-preload-audio-in-
phonegap.html)ことで疑似的に行うことはできるようですが、Androidではこの手は使えませんし、サードパーティのプラグインが必要になるかもしれません。


CC BY-SA 3.0
2016-10-10T13:17:14.447
29458
2016-10-10T13:17:14.447
8000
29378
answer