SwiftUIとAVFoundationで音声を再生する方法

  • このエントリーをはてなブックマークに追加

Swiftで書いたコードに音声を再生する機能を追加します。音声の再生にはAVFoundationを使用し、SwiftUIで作成したボタンウィジェットと組み合わせましょう。ここではまず簡単な効果音を鳴らすコードを作成し、次に録音した音をそのまま再生する方法を紹介します。

こんにちは。wat(@watlablog)です。録音の次は音声を再生するSwiftコードを紹介します

前回までのあらすじ

記事作成の動機

地道に音声系のブログ記事を書いてきて毎回出だしの文が同じになりそうだったので、今回は筆者がここまでにやってきたことを事前知識としてさらっと紹介するに留めます。

Advertisements

最終的には以下記事のような波形分析アプリを作りたいと思いプログラミング方法を調べていました。しかしこの記事で扱った方法ではiOSアプリへ適用するのが難しく、色々と挫折を経て王道であるSwiftプログラミングを始めたという経緯です。

kivyでピーク検出機能付き簡易FFTアナライザを作ってみた
 (Pythonで作成したアプリ。デスクトップアプリとしては使える。)

必要な基礎知識

①基礎文法をさらっと確認し、②録音方法③グラフ表示方法を扱った後、④録音した波形をグラフに表示させる記事を書きました。
詳細はこれらのリンク先をご確認ください。

動作環境

この記事で紹介しているプログラミング環境を参考に紹介します。Xcodeはバージョンによりバグが出るかもしれません。当ブログのコードをコピペしても動かない場合は先ほど紹介した記事を確認してみると解決するかも…。

                                                            
Mac OSmacOS Ventura 13.2.1
CPU1.4[GHz]
メモリ8[GB]
Xcode Version14.3(14E222b)
Swift Version5.8(swiftlang-5.8.0.124.2 clang-1403.0.22.11.100)
iPhone SE2 OSiOS 16.3.1

まずは簡単に「タップしたら効果音が鳴るアプリ」を作成する

事前に音声ファイルを準備する

効果音のフリー素材

音声の再生にはAVFoundationAVAudioPlayerを使います。基本的な機能のみを学習するため、まずは最も簡単な「準備してある音声を再生する」というアプリを作ってみましょう。
ボタンをタップして効果音が鳴るアプリならシンプルで良さそうです。

今回、効果音はフリー素材として効果音ラボさんのを使いました。
※フリー素材といっても著作権は当然あります。必ず利用規約を読んだ方が良いです。
効果音ラボhttps://soundeffect-lab.info/

Xcodeにファイルを登録する方法

音声ファイルを用意したらあとはXcodeに登録すれば簡単に使うことができます。
Xcodeを開き、ナビゲーションツリーにドラッグ&ドロップすれば登録可能です。これでプログラム上から参照できます。

Xcodeにファイルを登録する方法

ファイルは必ずしもプロジェクトファイルの場所になくても良いようですが、一応一緒にしておいた方が良いでしょう。

初期コード

まずはUI部分を作っておきましょう。こちらが今回の初期コードです。ボタンが中央に1つだけ配置されており、「Tap me!」と書かれています。このボタンをクリックしたら用意しておいた効果音が鳴るようにプログラミングします。

 

こんな感じ。

UIの例

全コード

こちらが編集後のコード(ContentView.swift)です。説明は後述。

以下のコーディングを行い、あとはボタンアクション部分でplaySound()を呼び出せば音声が再生されます。

  • import AVFoundation
    ライブラリを使うためのimport文です。
  • @State private var audioPlayer: AVAudioPlayer?
    再生に必要なAVAudioPlayerオブジェクトをオプショナル型で宣言します。
  • func playSound()
    このメソッドで音声を再生する部分を書いています。Bundle.main.url(forResource: "press", withExtension: "mp3")でファイル名と拡張子を定義していますが、これを自分のファイル名に変更してください

動画で紹介しようと思いましたが、効果音単体の音声動画は効果音ラボさんに記載の再配布に該当するとのことで、ここでは割愛します。ご自分の環境で試してみてください。

録音したデータを再生するSwiftコードの例

それでは本題です。AVAudioPlayerの使い方がわかったので、「SwiftUI/iOSアプリ:録音データをChartsでグラフ化する」の記事で紹介したコードに再生機能を追加してみましょう。

全てをContentView.swiftに記載すると長くなってしまうので、クラス部分をAudio.swift、本文をContentView.swiftに分けました。ここではその2つのファイルをそれぞれ紹介します。

Audio.swift

録音したデータを再生するために、AVAudioPlayerとともにaudioFileURLもクラスの上部で宣言し直しています。また、setUpAudioRecorder()におけるnilチェックを追加しています。playRecording()で音声を再生するという内容です。

ContentView.swift

Button("Play")HStackで既存のStart Recordingボタンに横付けし、その部分でrecorder.playRecording()を呼び出しています。ContentView.swiftは簡単な内容ですね。

実行結果

こちらが実行結果です。音声付きなのでYouTubeに投稿してみました。
PCの内部音声のみ録音しているため、録音している前半は無音ですが、Playボタンを押した後は筆者の口笛が聴けます。

もちろんiPhone実機にインストールして使用することもできました。

iPhone実機で再生音が小さくなる問題の解決法

作ったアプリで遊んでいると、Macbookで再生する時とiPhoneで再生する時で、音量に明確な差があることがわかりました。iPhoneのスピーカーを最大音量に設定しても、録音した音声がか細い感じです。

これはAIの力により解決したのですが、「func playRecording() {}」を以下のように修正します。

3つのtryを追加するだけ。ここに至るまで色々なプロンプトを試しましたが、きちんと情報を伝えることで適切な回答が返ってきます。以下は敬意を表してChatGPT-4に自ら説明していただきましょう。

ChatGPT-4の回答

まとめ

このページではSwiftUIで作成したボタンをクリックするとAVFoundationによる音声再生が行われるアプリの作成方法を紹介しました。効果音単体のシンプルな再生方法で基礎を学び、その後録音したデータを再生するという2つのコード紹介の構成をとっています。

録音と再生ができるようになったので、ちょっとしたアプリ感が出てきました。

ここから先の波形分析にはもう少し越えなきゃいけないハードルがありそうですが、そういったところをクリアしていくのが趣味プログラミングの醍醐味なのかもしれません。

ただ、難しいところはチャットAIに聞きながらやっているので、僕はここに書いてあるコードの実力まではまだありません。AIにより(趣味の)コピペプログラマの未来は明るそうです。

録音と再生を覚えることができました!
Twitterでも関連情報をつぶやいているので、wat(@watlablog)のフォローお待ちしています!

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*