web-dev-qa-db-fra.com

Comment jouer du son en React Native?

Je veux jouer un son en React Native.

J'ai essayé de lire ici en zmxv/react-native-sound , mais en tant que débutant comme moi, cette documentation me rend confus comment l'appliquer en React Native code.

Avant d'avoir essayé celui-ci pour faire réagir le son de lecture native sur l'événement et créer un code comme celui-ci:

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>
        )
    }
}

Et c'est là que je mets mon audio:

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

Structure du projet

Project Structure

Alors, qu'est-ce qui ne va pas dans mon code?

javascriptandroidreact-nativereact-native-sound
4
Tri

Cela préchargera le son et lorsque vous appuyez sur la lecture, il le jouera.

   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

Merci beaucoup qui a répondu à cette question, mais j'ai résolu cela avec cette simple:

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

Essayez ce code pour lire le son:

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

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

Il est piraté et résolu par https://github.com/zmxv/react-native-sound/issues/89#issuecomment-276678935

2
Vishal Jadav

Pour iOS, ce qui a fonctionné pour moi est le suivant:

  1. Vérifié que mon fichier de ressources était en cours de lecture dans xCode
    • Ouvrez xCode
    • Sélectionnez le fichier
    • Cliquez sur jouer dans le lecteur xCode
  2. Une fois qu'il jouait du son (avait des problèmes avec certains fichiers, peut-être l'encodage),
    • Ajoutez le fichier en tant que ressource (assurez-vous qu'il se trouve dans les phases de génération)
  3. Compilez le projet dans xCode et exécutez-le à partir de là
    • Remarque: Chaque fois que vous modifiez les ressources ou attendez de nouvelles ressources, vous devez compiler votre application native en le faisant à partir de xCode ou npm run ios

Voici mon code:

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