浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「react-native-sound」ライブラリを導入してボタンタップ時に効果音を鳴らす

タイトル通り、ボタンをタップしたら効果音が再生される機能を実装するために、「react-native-sound」というライブラリを導入したので、その手順についてまとめ。
導入自体は簡単で、むしろ使用する音源探しの方が時間がかかったような気がします。

GitHub のページはこちらから。

GitHub – zmxv/react-native-sound: React Native module for playing sound clips
https://github.com/zmxv/react-native-sound

 

まず、下記コマンドを実行してライブラリをインストールします。

npm install react-native-sound --save

react-native link react-native-sound

// iOS の場合は下記も実行する
npx pod-install

なお、2行目の react-native link react-native-sound を実行するとワーニングが発生してしまうのですが、こちらを実行しないと動作しなかったので、必ず実行するか、もしくはこちらのページを参考に、手動で設定を行ってください。

次に、用意した音楽ファイルを、Android、iOS のプロジェクトに追加します。
Android の場合は、android/app/src/main/res/raw に、音楽ファイルを追加します。
iOS の場合は、Xcode を開き、AppDelegate.h 等のファイルがある場所に、音楽ファイルを追加します。

上記が完了したら、音楽ファイルを再生するためのコードを追加していきます。
まず、再生する音楽ファイルを準備します。

import Sound from 'react-native-sound';

this.sound = new Sound(['音楽ファイル名'], Sound.MAIN_BUNDLE, error => {
  if ( error ) {
    console.log("failed to load the sound.", error);
  }
});

上記でエラーが発生しないことが確認できたら、あとは下記コマンドで音楽ファイルを再生します。

this.sound.play();

なお、ページを離れるタイミングでは、必ず release() を実行し、リソースを解放してください。
下記のように componentWillUnmount() で実行するのがいいと思います。

componentWillUnmount() {
  this.sound.release();
}

私が実際に使用した機能は以上です。

他にも、再生途中で音楽を止める stop() や、音楽のボリュームを設定できる setVolume() メソッドもありました。
また、実際に動作させてはいませんが、stop() が呼び出されるまでループ再生を行うこともできるようです。

本当に基本的な動作しかしていませんが、かなり使いやすかったです!
アプリで音楽を再生したい場合は、是非導入をご検討ください。

 

以上、React Native で音楽ファイルを再生できるライブラリ「react-native-sound」のご紹介でした。
ご参考になれば幸いです。

  • この記事いいね! (0)