I’m trying to develop an app with Ionic 2 that reproduces a xylophone. I’ve placed 3 divs on my stage with different colors (red, green and yellow), like this:
In my file I’ve created a method that on tap play a different sound (using NativeAudio plugin) and it works fine. Every time I click on a button it plays a different sounds.
I’ve also used the preloadComplex attribute “voices” to listen different sounds when I click multiple divs at the same time, and it works.
The big problem is related to the gestures. I want to reproduce the classic behaviour of a piano, so I press the first button and swiping down the finger until the last one I’d love to listen the three sounds plays every time my finger reach the new button. I’ve tried lots of changes in my code but nothing works. I can click on the button and listen to the correct sound, also swipe, but the sound scale doesn’t work! Every time I listen to only the first one!
You can see this behaviour simply downloading a similar app:
https://itunes.apple.com/it/app/ixylophone-lite-suona-insieme-a-xilofono-bambini/id329934119?mt=8
and you will see the perfect result that I want to reproduce.
This is the html code of my page (simplified):
HTML
<ion-content>
<div swipe-vertical class="noteBtn" tappable (press)= "play(1)" (tap)="play(1)" (swipe)="play(1)" (onSwipeUp)="play(1)" (onSwipeDown)="play(1)">
</div>
<div swipe-vertical class="noteBtn yellow" tappable (press)= "play(2)" (tap)="play(2)" (swipe)="play(2)" (onSwipeUp)="play(2)" (onSwipeDown)="play(2)">
</div>
<div swipe-vertical class="noteBtn green" tappable (press)= "play(3)" (tap)="play(3)" (swipe)="play(3)" (onSwipeUp)="play(3)" (onSwipeDown)="play(3)">
</div>
</ion-content>
As you can see I’ve used lots of gestures but I don’t think is the correct way. I’ve also used a specific directive:
http://plnkr.co/edit/CY753ia57ZBUKMywPIm4?p=preview
to detect the swipe up and down inside the single div.
This is my ts code.
TS
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { NativeAudio } from '@ionic-native/native-audio';
import { Platform } from 'ionic-angular';
import { HomePage } from '../home/home';
/*
Generated class for the Game page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-game',
templateUrl: 'game.html'
})
export class GamePage {
url;
stream;
promise;
adv;
native;
homePage;
constructor(public platform: Platform, public navCtrl: NavController, public navParams: NavParams, private nativeAudio: NativeAudio) {
this.adv = false;
this.native = false;
this.homePage = HomePage;
}
ionViewWillEnter() {
let noteMus:Array<string> = ["DO", "RE", "MI", "FA", "SOL", "LA", "SI"];
var _this = this
if (this.platform.is('ios') || this.platform.is('android')) {
this.native = true
}
if (this.native) {
var i=0
var _this = this
for (i=1;i<=7;i++) {
this.nativeAudio.preloadComplex('tone'+i, 'assets/notes/' + noteMus[i-1] + ".mp3" , 1, 7, 0).then(function(msg){
}, function (error){
_this.native = false
});
}
}
}
play(qs) {
if (this.native) {
this.nativeAudio.play('tone'+qs)
} else {
let noteMus:Array<string> = ["DO", "RE", "MI", "FA", "SOL", "LA", "SI"];
this.url = "assets/notes/"+noteMus[qs-1]+".mp3"
this.stream = new Audio(this.url);
this.stream.play();
this.promise = new Promise((resolve,reject) => {
this.stream.addEventListener('playing', () => {
resolve(true);
});
this.stream.addEventListener('error', () => {
reject(false);
});
});
return this.promise;
}
};
}
I’m definetely going crazy! Someone had a similar experience and solved the problem? Thanks in advance