タイトル通り、ボタンをタップしたら効果音が再生される機能を実装するために、「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」のご紹介でした。
ご参考になれば幸いです。
