web-dev-qa-db-ja.com

React Nativeでサウンドを再生する方法は？

React Nativeでサウンドを再生したい。

私は zmxv/react-native-sound でここを読もうとしましたが、私のような初心者として、そのドキュメントはReact Nativeでそれを適用する方法を混乱させますコード。

私が試してみる前に これ イベントでネイティブ再生音を反応させ、次のようなコードを作成します：

import React, { Component } from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
const Sound = require('react-native-sound')


export default class MovieList extends Component {

    handlePress() {
        // Play some sound here
        let hello = new Sound('motorcycle.mp3', Sound.MAIN_BUNDLE, (error) => {
            if (error) {
              console.log(error)
            }
          })

          hello.play((success) => {
            if (!success) {
              console.log('Sound did not play')
            }
          })
    }

    render() {
        const { movie } = this.props
        return (
            <TouchableOpacity onPress={this.handlePress.bind(this)}>
                <View>
                      <Text>Start</Text>
                </View>
            </TouchableOpacity>
        )
    }
}

そして、これは私が私のオーディオを置く場所です：

MyProject/Android/app/src/main/res/raw/motorcycle.mp3

プロジェクトの構造

Project Structure

それで、私のコードの何が問題になっていますか？

javascriptandroidreact-nativereact-native-sound
4
Tri

これによりサウンドがプリロードされ、再生を押すと再生されます。

   export default class MovieList extends Component {
    componentDidMount(){
      this.hello = new Sound('whoosh.mp3', Sound.MAIN_BUNDLE, (error) => {
        if (error) {
          console.log('failed to load the sound', error);
          return;
        }
      });
    }
    
    
    handlePress() {
      this.hello.play((success) => {
        if (!success) {
          console.log('Sound did not play')
        }
      })
    }

    render() {
        const { movie } = this.props
        return (
            <TouchableOpacity onPress={this.handlePress.bind(this)}>
                <View>
                      <Text>Start</Text>
                </View>
            </TouchableOpacity>
        )
    }
}
5
Mohammed Ashfaq

この質問に答えてくれた人に感謝しますが、私はこの簡単な質問でこれを解決しました：

import React, { Component } from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
import Sound from 'react-native-sound';

export default class MovieList extends Component {

    sound = new Sound('motorcycle.mp3');

    playSound = () => {
        this.sound.play()
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.playSound}>
                    <View>
                        <Text>Start</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}
3
Tri

サウンドを再生するには、次のコードを試してください。

setTimeout(() => {
     var sound = new Sound("motorcycle.mp3",Sound.MAIN_BUNDLE, (error) => {
                     /* ... */
     });

     setTimeout(() => {
         sound.play((success) => {
                  /* ... */
         });
    }, 100);
}, 100);

それはハッキーで、 https://github.com/zmxv/react-native-sound/issues/89#issuecomment-276678935 によって解決されます

2
Vishal Jadav

IOSで私にとってうまくいったのは次のとおりです。

  1. リソースファイルがxCode [.____で再生されていることを確認しました。]
    • XCodeを開く
    • ファイルを選択
    • XCodeプレーヤーで[再生]をクリックします
  2. それがサウンドを再生していたとき（一部のファイルに問題があり、場合によってはエンコードされていました）、
    • ファイルをリソースとして追加します（ビルドフェーズであることを確認してください）
  3. XCodeでプロジェクトをコンパイルし、そこから実行します
    • 注：リソースを変更するか、新しいリソースを期待するたびに、xCodeまたはnpm run iosからネイティブアプリケーションをコンパイルする必要があります。

これは私のコードです：

const sound = new Sound(
    "myFile.mp3",
    Sound.MAIN_BUNDLE,
    error => {
      if (error) {
        console.log("failed to load the sound", error);
        return;
      }
      sound.play(() => sound.release());
    }
  );
// The play dispatcher
sound.play();
0
Adán Carrasco