本文介绍了如何在 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> ); } }更多推荐
如何在 React Native 中播放声音(mp3)?
发布评论