2点間をリピート再生可能

ABリピートも可能なレベルメーター付きオーディオプレーヤーを作る

2017年10月24日 17時00分更新

文● 柴田文彦　編集●吉田ヒロ

　前々回から、AVFoundationのAVAudioPlayerを使ったオーディオプレーヤーを作成しています。前回は、その前に作った単純なオーディオプレーヤーに、再生の進行状況を刻々と表示するスライダー追加し、ユーザーがそのスライダーを操作することで、任意の場所からの再生を可能にするところまで作り込みました。

　今回はそこにさらに手を加えて、音楽ファイルの再生時間軸上の2点、A点とB点を設定し、その間でリピート再生する、いわゆるABリピートの機能を付け加えてみることにします。そのための機能が特にフレームワークに用意されているわけではありません。ただし、前回わかったように、音楽ファイルの任意の位置から再生するのは比較的簡単です。今回は、その機能だけを使ってABリピートを実現します。

　さらに、再生音のレベルを左右のチャンネル別々に棒グラフ状にアニメーション表示するメーターも付け加えます。こちらは、再生位置のレベルを取得する機能がAPIとして用意されているので、それを利用します。表示には元来は処理の進行状況などを表示するためのプログレスバーを使うことにしましょう。

　こうした機能の追加によって、さらにオーディオプレーヤーらしいプログラムになるはずです。

A点B点を設定するボタンを追加する

　すでに述べたように、特にABリピートを実現するためのAPIがあるわけでもないので、自由に設計することにします。また、プレイグランドという不自由な環境でもあるため、UIはできるだけシンプルなものにしたいところです。というわけで、すでに稼働している時間スライダーを利用してA点B点を設定するものを考えました。

　UIとしては、A点とB点それぞれに、ボタン（UIButton）とラベル（UILabel）を用意し、A点のボタンをタップしたときの再生時間のスライダーの位置をA点とします。その値はA点のラベルに表示し、同時にA点の位置として変数にも記憶します。B点についてもまったく同じことを実行します。そして、A点が0でないか、B点が音楽ファイルの長さに一致していない場合、要するにA点かB点のどちらかでも動かされている場合には、リピートモードだと判断することにします。その状態も変数に記憶しておいて、あとで再生中にその状態に応じた処理を実行します。

　ここまでを実現するプログラムを見ておきましょう。なお今回も、前回の最後の状態のプログラムに手を加えていきます。まず、A点、B点用のボタン（posAButton／posBButton）とラベル（posALabel／posBLabel）をビューコントローラーのプロパティとして用意します。またA点とB点の位置（秒）を記憶する変数として、positionAとpositionBを用意し、それぞれ0.0に初期化しておきます。さらにリピートモードかどうかを記憶する真偽値の変数repPlayも用意します。

まず前回のプログラムに、再生時間のA点とB点を指定するためのボタン2つ（posAButton、posBButton）と、それらの時間を表示するラベル（posALabel、posBLabel）を追加します。またA点、B点の時間そのものを記憶する変数（positionA、positionB）と、ループ再生モードであることを示す変数（repPlay）も追加しています

　ボタンは、viewDidLoadメソッドの中で初期化しておきます。ボタンのタイトルは、それぞれ「A Position」と「B Position」とし、ボタンの背景色は茶色にしてみました。また、ユーザーがボタンをタップした際のターゲットとして、それぞれposAButtonTappedとposBButtonTappedというメソッドが呼ばれるように設定します。A点の実際の時間は0.0に、B点は音楽ファイルの長さに初期化しておきます。またラベルも、それぞれの値を表示するように設定します。ボタンとラベルは、いずれもビューコントローラーのビューに張り付けておくことを忘れないようにしましょう。

viewDidLoadメソッドの中で、追加した2つのボタンを初期化します。ラベルは特に初期化しませんが、ボタンとともにビューコントローラーのビューには追加しておきましょう。その後、A点の値を0.0に、B点の値を音楽ファイルの長さに設定して、ラベルの表示も、それぞれの値に設定します

　A点、B点のボタンとラベルは、例によってviewWillLayoutSubviewsメソッドの中で配置を決めておきます。ここでは、Aボタン、Aラベル、Bボタン、Bラベルが、すべて横一列に同じY軸位置に並ぶようにしてみました。A点のセットは、画面の左端から10ポイント右の位置から、B点のセットは画面の左右方向の中央から10ポイントだけ右の位置から、それぞれ右方向に向かって配置しています。