javascript 如何在 React Native 中播放声音？

How to play sound in React Native?

提问by Tri

I want to play a sound in React Native.

我想在 React Native 中播放声音。

I have try to read here in zmxv/react-native-sound, but as a beginner like me, that's documentation make me confused how to apply that in React Native code.

我曾尝试在zmxv/react-native-sound 中阅读这里，但作为像我这样的初学者，该文档让我很困惑如何在 React Native 代码中应用它。

Before I have try this oneto make react native play sound on event and make a code like this:

之前我尝试这一个做出反应的事件本机播放的声音，让这样的代码：

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

And this is where I put my audio:

这就是我放音频的地方：

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

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

Project structure

项目结构

So, what's wrong in my code?

那么，我的代码有什么问题？

回答by Mohammed Ashfaq

This will preload the sound and When you press the play it will play it.

这将预加载声音，当您按下播放键时，它将播放它。

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

回答by Tri

Thanks very much who has answer to this question, but i have resolve this with this simple one:

非常感谢谁回答了这个问题，但我已经用这个简单的方法解决了这个问题：

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

回答by Vishal Jadav

Try this code for play sound:

试试这个代码播放声音：

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

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

It's hacky and solved by https://github.com/zmxv/react-native-sound/issues/89#issuecomment-276678935

它是 hacky 并由https://github.com/zmxv/react-native-sound/issues/89#issuecomment-276678935解决

回答by Adán Carrasco

For iOS what worked for me is the following:

对于 iOS，对我有用的是以下内容：

1. Checked that my resource file was being played in xCode
   • Open xCode
   • Select the file
   • Click play in the xCode player
2. Once it was playing sound (had issues with some files, possibly encoding),
   • Add the file as resource (Make sure is in Build Phases)
3. Compile the project in xCode and run it from there
   • Note: Every time you change the resources or expect new resources you need to compile your Native application either by doing it from xCode or npm run ios

1. 检查我的资源文件是否正在 xCode 中播放
   • 打开 xCode
   • 选择文件
   • 在 xCode 播放器中单击播放
2. 一旦播放声音（某些文件有问题，可能是编码），
   • 将文件添加为资源（确保处于构建阶段）
3. 在 xCode 中编译项目并从那里运行它
   • 注意：每次更改资源或期望新资源时，您都需要通过从 xCode 或 npm run ios

This is my 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();