目次
- はじめに
- 実装方法
- まとめ
はじめに
音楽を再生するアプリを使っている時
のような機能をよく見かけますよね。
スライダーを右に持っていけば音量が上がり、左に持っていけば音量が下がるといった動きは説明しなくても皆さんご存知だと思います。
今回の記事ではKonyでSlider WidgetとMedia APIを組み合わせて音楽の音量調整機能を実装してみましたのでご紹介します！
実装方法
Default LibraryからSliderを見つけてフォームにドラック＆ドロップしてスライダー部品を設置します。
Properties->Sliderタブにてスライダーの設定が出来るのですが、今回は
・Min Value（最小値）：0
・Max Value（最大値）：100
・Step(スライドする毎にどれだけ加減するか）:1
・Selected Value(初期選択値）：50
として設定しました。このスライダーの値が音量として設定されていくことになります。
あとは再生ボタンや音量のアイコンなどを配置していきます。
次に再生する音楽ファイルを以下リソースフォルダに格納しておきます。
・プロジェクトフォルダ/resources/mobile/native/android/raw/
・プロジェクトフォルダ/resources/mobile/native/iphone/raw/
今回は「freesound.mp3」というファイルを格納しておきました。
※音楽は甘茶の音楽工房様のものを利用しています。
では、再生ボタン押下時に音楽を再生、再度押下時に停止するように作っていきます。
FormControllerに以下のように実装します。
define({
// メディアオブジェクトをクローバル変数化
mediaplayer: null,
// 再生ボタン押下時
onclickPlay: function() {
// メディアオブジェクトが無い場合
if(!this.mediaplayer){
this.view.lblInformation.text="Initialize...";
// 初期処理が終わっていない場合
// assets内にある音楽ファイルを各端末ごとのデータ領域にコピーする
var destFilePath = kony.io.FileSystem.getDataDirectoryPath() + "/freesound.mp3";
kony.io.FileSystem.copyBundledRawFileTo("freesound.mp3", destFilePath);
// データ領域内の音楽ファイルを読み込んでメディアオブジェクトを作成する
var file = new kony.io.File(destFilePath);
this.mediaplayer = kony.media.createFromFile(file);
}
if (this.mediaplayer.isPlaying) {
// 再生中ならば音楽を止める
this.mediaplayer.pause();
this.view.lblInformation.text="STOP";
this.view.btnPlay.skin = "sknBtnPause";
} else {
// 音楽が止まっている場合は再生する
// 負数を選択した場合は、止めるまで再生し続ける
this.mediaplayer.play(-1);
this.view.btnPlay.skin = "sknBtnPlay";
}
}
});
再生ボタンのonClickアクションに
先ほど作成したonclickPlayファンクションを実行するように設定します。
これで再生ボタン押下時に音楽が鳴るようになりました！
が、肝心のSliderWidgetを使って音量調整をするように作っていないですね
これから作り込んでいきます！
FormControllerに以下の音量調整をするコードを追加します。
スライダーの値はPropertiesで設定した0-100の値で渡されてくるのですが、メディアオブジェクトのvolume(音量）には0-1.0までの値で設定する必要があるので、100で割るようにしています。
// スライダーでの音量変更時処理
setVol : function (volume) {
this.mediaplayer.volume = Number(volume)/100;
this.view.lblInformation.text="volume:" + Number(volume)/100;
}
ついでに先ほど追加したonclickPlayファンクションに、再生前に音量を設定するようにsetValファンクションを呼び出すように作っておきます。（これでスライダー値を使って音量設定された状態で音楽が常に再生されるようになります）
onclickPlay: function() {
・・・・・
if (this.mediaplayer.isPlaying) {
・・・・・
} else {
// 音楽が止まっている場合は再生する
// !!!!! 再生前に音量を設定しておくコードを追加 ！！！！！！
this.setVol(this.view.sldSound.selectedValue);
// 負数を選択した場合は、止めるまで再生し続ける
this.mediaplayer.play(-1);
this.view.btnPlay.skin = "sknBtnPlay";
}
}
スライダーのonSlideアクションに
先ほど作成したsetVolファンクションを実行するように設定します。
引数のvolumeにはEventObject->selectedvalueを選択するようにします。
これでスライダーをスライドさせた時の値を用いて、音量を設定するように作ることが出来ました！
実際に動かしてみた結果はこちら！
※音楽が鳴るのでご注意ください
— Kony (@Kony12763790) April 14, 2021
最終的なFormControllerのソースコードは以下の通りになります。
define({
// メディアオブジェクトをクローバル変数化
mediaplayer: null,
// 再生ボタン押下時
onclickPlay: function() {
// メディアオブジェクトが無い場合
if(!this.mediaplayer){
this.view.lblInformation.text="Initialize...";
// 初期処理が終わっていない場合
// assets内にある音楽ファイルを各端末ごとのデータ領域にコピーする
var destFilePath = kony.io.FileSystem.getDataDirectoryPath() + "/freesound.mp3";
kony.io.FileSystem.copyBundledRawFileTo("freesound.mp3", destFilePath);
// データ領域内の音楽ファイルを読み込んでメディアオブジェクトを作成する
var file = new kony.io.File(destFilePath);
this.mediaplayer = kony.media.createFromFile(file);
}
if (this.mediaplayer.isPlaying) {
// 再生中ならば音楽を止める
this.mediaplayer.pause();
this.view.lblInformation.text="STOP";
this.view.btnPlay.skin = "sknBtnPause";
} else {
// 音楽が止まっている場合は再生する
// 再生前に音量を設定しておく
this.setVol(this.view.sldSound.selectedValue);
// 負数を選択した場合は、止めるまで再生し続ける
this.mediaplayer.play(-1);
this.view.btnPlay.skin = "sknBtnPlay";
}
},
// スライダーでの音量変更時処理
setVol : function (volume) {
this.mediaplayer.volume = Number(volume)/100;
this.view.lblInformation.text="volume:" + Number(volume)/100;
}
});
まとめ
Slider Widgetは音量再生の他、図形の拡大・縮小／入力項目の選択値など幅広く使われるものなので簡単に使えるのは嬉しいですね
この記事が皆さんの開発に役立ちますように！
参考
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/Default.htm#media_api.htm
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.media_functions.htm
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/Slider.htm
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.io.filesystem_functions.htm