react-native-soundを使って、React Native製のiOSアプリでmp3を再生する 🔈

react-native-soundを使って、iOSアプリでmp3を再生してみます。

基本的には、ドキュメント通り進めていけばOKです。

アプリの作成

npx react-native@latest init ReactNativeSound

react-native-soundの導入

yarn add react-native-sound

npx pod-install

Xcodeにmp3を読み込み

再生したいmp3をプロジェクトのルートに置いて、Xcodeにもドラッグアンドドロップします。

App.tsxを編集

import React from 'react';
import {Button, SafeAreaView, StyleSheet} from 'react-native';
import Sound from 'react-native-sound';

Sound.setCategory('Playback');

const groove = new Sound('groove.mp3', Sound.MAIN_BUNDLE, (err: string) => {
  if (err) {
    console.error(err);
    return;
  }
});

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Button
        title={'sound'}
        onPress={() => {
          groove.play();
        }}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});