如何在 React Native 中播放声音(mp3)?

本文介绍了如何在 React Native 中播放声音(mp3)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想为我的项目制作音频播放器.我不知道如何使用 TouchableOpacity 播放音频.我想播放音频，但是当我按下播放图标(按钮)时，它必须更改为暂停图标(按钮).我需要一些循环解决方案.我该如何使用它?

I want to make audio player for my project. I dont know how to play audio with TouchableOpacity. I want to play audio but when I press on play icon (button) it have to be changed to pause icon (button). And I need some solution for loop. How can I use it?

<TouchableOpacity style={styles.playButtonContainer}> <Ionicons name="ios-play" size={75} color="#000" /> <Ionicons name="ios-pause" size={75} color="#000" /> </TouchableOpacity> <TouchableOpacity> <Entypo name="loop" size={40} color="#000"></Entypo> </TouchableOpacity>

推荐答案

这里是导入:

import React from "react"; import { Text, View, TouchableOpacity } from "react-native"; import { WebView } from "react-native-webview";

然后我使用了 WebView :

Then I used WebView :

export default class App extends React.Component { render() { return ( <View> <TouchableOpacity style={{ marginTop: 50 }} onPress={() => { this.webview.injectJavaScript( 'document.getElementById("audio").play();' ); }} >

这是播放按钮:

<Text>Play</Text> </TouchableOpacity> <TouchableOpacity style={{ marginTop: 50 }} onPress={() => { this.webview.injectJavaScript( 'document.getElementById("audio").pause();' ); }} >

这是暂停按钮:在此处输入代码

<Text>Pause</Text> </TouchableOpacity> <WebView ref={(ref) => (this.webview = ref)} originWhitelist={["*"]} mediaPlaybackRequiresUserAction={false} // Allow autoplay useWebKit={true} source={{ html: '<audio id="audio" loop> <source src="go.transportili.app/static/sounds/ring.mp3" type="audio/mp3" /> </audio>', }} /> </View> ); } }