#5 C4で音楽の再生・停止をコントロールするーC4でAudio Playerをつくる(3)
この記事は「一人アドベントカレンダー2013〜Lonely Advent Calender 2013〜」の5日目の記事です。
前回はC4Sampleの音源の再生位置をシークする機能、計測した音源のレベルにあわせて円の大きさを変化させる機能を実装しました。 非常に簡単な実装で音楽にあわせたオブジェクトの操作ができることがお分かりいただけたと思います。
今回は音源の状態を取得して再生・停止をコントロールする機能をを実装したいと思います。
再生・停止ボタンの追加
前回のコードに手を加えていきます。
@implementation C4WorkSpace { C4Sample *sample; C4Slider *slider; //Level Circle C4Shape *levelCircle; //Masked Image C4Image *maskedImage; //Timer C4Timer *meterUpdateTimer; C4Button *playbackButton; <---追加 }
playbackButton
を追加します。
-(void)setup { sample = [C4Sample sampleNamed:@"C4Loop.aif"]; sample.loops = YES; //metering enable sample.meteringEnabled = YES; // [sample play]; <---消す [self setupCircle]; [self setupSlider]; [self setupUI]; <---追加 meterUpdateTimer = [C4Timer timerWithInterval:1/30.0f target:self method:@"updateMeters" repeats:YES]; [meterUpdateTimer start]; }
setupメソッドでは[sample play]
を消し、新たに[self setupUI]
を追加します.
setupUIはこのような感じになります。前回作ったUIに再生・停止用のボタンを被せます。
-(void)setupUI { //再生・停止ボタン playbackButton = [C4Button buttonWithType:CUSTOM]; playbackButton.frame = CGRectMake(0, 0, 28, 28); [playbackButton setBackgroundImage:[C4Image imageNamed:@"icon_play.png"] forState:NORMAL]; [playbackButton setBackgroundImage:[C4Image imageNamed:@"icon_stop.png"] forState:SELECTED]; playbackButton.center = self.canvas.center; [playbackButton runMethod:@"onPlaybackButton" target:self forEvent:TOUCHUPINSIDE]; [self.canvas addSubview:playbackButton]; }
これで再生・停止ボタンが追加されました。
音源の再生状態の取得playing
ボタンが押されることで再生・停止が正しく切り替わるように、onPlaybackButton
を実装します。これは先ほど追加したボタンのタッチイベントとして定義しています。
-(void) onPlaybackButton { if (sample.isPlaying) { [sample pause]; playbackButton.selected = FALSE; } else { [sample play]; playbackButton.selected = TRUE; } }
このようにC4Sampleのplayingというプロパティを使うことで音源の再生状態を取得して再生・停止を正しく切り替えることができるようになりました!
次回は複数の音源を切り替えて再生する方法を実装する予定です!