android 如何在React Native中播放声音?

zujrkrfu  于 2023-01-03  发布在  Android
关注(0)|答案(5)|浏览(222)

我想在React Native中播放声音。
我试着在zmxv/react-native-sound中阅读这里,但是作为一个像我这样的初学者,这篇文档让我困惑如何在React原生代码中应用它。
在我尝试this one之前,让react原生播放声音on event,并生成如下代码:

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
项目结构

我的代码有什么问题吗?

n53p2ov0

n53p2ov01#

这将预加载声音,当您按下播放按钮,它将播放它。

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

如果您正在寻找播放音轨从一个声音列表请检查这个gist的详细代码。

hwazgwia

hwazgwia2#

非常感谢谁有这个问题的答案,但我已经解决这个简单的一个:

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

wmomyfyw3#

尝试以下代码播放声音:

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

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

这个问题很棘手,可以通过www.example.com解决https://github.com/zmxv/react-native-sound/issues/89#issuecomment-276678935

qco9c6ql

qco9c6ql4#

对于iOS,我的工作如下:

  • 检查我的资源文件是否正在xCode中播放
  • 打开xCode
  • 选择文件
  • 在xCode播放器中单击播放
  • 一旦它在播放声音(一些文件有问题,可能是编码),
  • 将文件添加为资源(确保处于构建阶段)
  • 在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();
e5nqia27

e5nqia275#

如果您正在使用Expo中的音频,则这可能会有所帮助

async componentWillMount() {
    this.backgroundMusic = new Audio.Sound();
    this.buttonFX = new Audio.Sound();
    try {
     await this.backgroundMusic.loadAsync(
     require("../../assets/music/Komiku_Mushrooms.mp3")
     );
     await this.buttonFX.loadAsync(
     require("../../assets/sfx/button.wav")
    );
    ...

只需要一行代码就可以播放声音效果。在onPlayPress事件处理程序的顶部,添加以下代码:

onPlayPress = () => {
    this.buttonFX.replayAsync();
    ...

请注意我是如何使用replayAsync而不是playAsync的--这是因为我们可能会多次使用这个声音效果,如果您使用playAsync并运行它多次,它将只播放第一次的声音。它将在以后派上用场,并且对于继续游戏屏幕也很有用。see more full example

相关问题