Quantcast
Channel: Appcelerator Developer Center Q&A Tag Feed (multitouch)
Viewing all articles
Browse latest Browse all 15

Performance issues using Sounds ?

$
0
0

Hello, I'm playing around with Titanium and trying to develop a small app that works like a Synthesizer (electric piano).

For now I have 2 buttons each one is linked to a mp3 or a wav file.

You can use several fingers at once so I had to use the TiMultitouch module. The problem I have is that the app is lagging when testing on my iPhone 3G...

Here is the source code of my app:

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Ti.UI.iPhone.hideStatusBar();
Ti.UI.setBackgroundColor('#000');
 
require("multitouch");
 
 
var snd1 = Ti.Media.createSound({url:'01.mp3', looping:true});
var snd2 = Ti.Media.createSound({url:'02.mp3', looping:true});
 
var toggleSound = function(state, index){
    var isFirst = (1==index);
    var snd = isFirst ? snd1 : snd2;
    if(state && !snd.isPlaying())
    {
            snd.play();
    }
    else if(!state && snd.isPlaying())
    {
        snd.stop();
    }
};
 
var win = Ti.UI.createWindow({'backgroundImage':'bg.png'});
var label = Titanium.UI.createTextArea({
    value:'W: '+win.width+' x H:'+win.height,
    height:300,
    bottom:100,
    font:{fontSize:12,fontFamily:'Courier New'},
    color:'#000',
    textAlign:'left',
    borderWidth:2,
    borderColor:'#bbb',
    borderRadius:5
});
win.add(label);
 
var bgUpColor = '#FFBB00';
var bgDownColor = '#F0FF0F';
 
var btn1 = Ti.UI.createView({backgroundColor:bgUpColor, width:150, height:30, left:0, top:0});
win.add(btn1);
 
var btn2 = Ti.UI.createView({backgroundColor:bgUpColor, width:150, height:30, left:160, top:0});
win.add(btn2);
 
var outputEvent = function(event)
{
    var str = String(event.type).toUpperCase()+' length? ';
    //str += event.points.length;
    var dict = event.points;
    for (var i in dict)
    {
        str += '\n'+i+' :   x='+dict[i].globalPoint.x+'   y='+dict[i].globalPoint.y;
    }
    label.value += str+'\n';
};
 
var in_array = function(needle, haystack, argStrict) {
    // *     example 1: in_array('van', ['Keventin', 'van', 'Zonneventeld']);
    // *     returns 1: true
    // *     example 2: in_array('vlado', {0: 'Keventin', vlado: 'van', 1: 'Zonneventeld'});
    // *     returns 2: false
    // *     example 3: in_array(1, ['1', '2', '3']);
    // *     returns 3: true
    // *     example 3: in_array(1, ['1', '2', '3'], false);
    // *     returns 3: true
    // *     example 4: in_array(1, ['1', '2', '3'], true);
    // *     returns 4: false
    var key = '',
        strict = !! argStrict;
 
    if (strict) 
    {
        for (key in haystack) 
        {
            if (haystack[key] === needle)
            {
                return true;
            }
        }
    } 
    else 
    {
        for (key in haystack) 
        {
            if (haystack[key] == needle) 
            {
                return true;
            }
        }
    }
    return false;
};
 
var lengthOfDictionary = function(dict)
{
    var cpt = 0;
    var str = '';
    for (var i in dict)
    {
        str += '['+i+'] x='+dict[i].x+' y='+dict[i].y+'\n';
        cpt++;
    }
    str += '\n'+JSON.stringify(dict)+'\n';
    str += 'Total: '+cpt+'\n\n';
    label.value = str;
    return cpt;
};
 
var allPoints = {};
var analyseAllPoints = function()
{
    detectTouchForArea(btn1);
    detectTouchForArea(btn2);
};
 
var updatePoints = function(event)
{
    var updatedPoints = event.points;
    for (var i in updatedPoints)
    {
        allPoints[i] = updatedPoints[i];
    }
};
 
var removePoints = function(event)
{
    var removedPoints = event.points;
    for (var i in removedPoints)
    {
        delete allPoints[i];
    }
};
 
var detectTouchForArea = function(view)
{
    lengthOfDictionary(allPoints);
    // At least one touch is down...
    var bgUpColor = '#FFBB00';
    var bgDownColor = '#F0FF0F';
    var found = false;
 
    var minX = view.left;
    var maxX = minX + view.width;
    var minY = view.top;
    var maxY = minY + view.height;
 
    var xPos, yPos;
    for (var i in allPoints)
    {
        xPos = allPoints[i].globalPoint.x;
        yPos = allPoints[i].globalPoint.y;
        if((xPos >= minX && xPos <= maxX) && (yPos >= minY && yPos <= maxY))
        {
            found = true;
            break;
        }
    }
    view.backgroundColor = found ? bgDownColor : bgUpColor;
    var index = (view.left==0) ? 1 : 2;
    toggleSound(found, index);
};
 
win.addEventListener('touchstart', function(event) 
{
    updatePoints(event);
    analyseAllPoints();
});
win.addEventListener('touchmove', function(event) 
{
    updatePoints(event);
    analyseAllPoints();
});
 
win.addEventListener('touchend', function(event) 
{
    removePoints(event);
    analyseAllPoints();
});
win.addEventListener('touchcancel', function(event) 
{
    removePoints(event);
    analyseAllPoints();
});
 
 
win.addEventListener('singletap', function(event) 
{
    // DON'T REMOVE THIS LISTENER!!
    // hack for multi touch module
});
 
win.open();
Please note that the mp3 I used were 13Ko or less (wav were less than 200Ko).

Do you see any issue that could reduce the speed/performance ?

I checked out the app Zampona which probably work the same way...

Any help is welcome! Thank you :)


Viewing all articles
Browse latest Browse all 15

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>