数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 Snack 中使用音频
音频是移动应用程序的常见组件。音频可以在应用程序中以多种方式使用。音频可以选择自手机，也可以使用任何在线链接，或者作为本地音频包含在项目本身中。Expo-av 可用于所有这些情况，以将声音集成到移动应用程序中。本文展示了 React Native 和 Javascript 代码，其中包含三个不同的示例，第一个示例从设备中浏览音频文件。在第二个示例中，音频来自在线链接，并与本地存储的音频文件混合。在第三个示例中，演示了音频的播放和停止。
算法 1
步骤 1 − 从 'react-native' 中导入 View、Text、TouchableOpacity、StyleSheet。还从 'expo-av' 导入 Audio 和从 'expo-document-picker' 导入 DocumentPicker
步骤 2 − 创建文件 (App.js)。
步骤 3 − 创建一个函数 selectAudioFunc。现在调用 DocumentPicker.getDocumentAsync 函数并从设备中获取音乐文件。
步骤 4 − 创建一个新函数并将其命名为 playyAudioo()，并编写代码以播放选定的音频文件。
步骤 5 − 使用 TouchableOpacity 并通过点击它来调用 playyAudioo()。
步骤 6 − 检查结果。
示例 1：从设备中选择音频文件进行播放。
项目中使用的重要文件是
App.js
示例
import {useState} from 'react';
import { TouchableOpacity, StyleSheet,View, Text } from 'react-native';
import { Audio } from 'expo-av';
import * as DocumentPicker from 'expo-document-picker';
export default function AudioExampleOne() {
var [myaudio, settAud] = useState([]);
selectAudioFunct= async ()=> {
settAud(
await DocumentPicker.getDocumentAsync({
type: 'audio/*',
copyToCacheDirectory: true,
})
);
}
playyAudioo= async ()=> {
const myAudioSrc = myaudio.uri;
const audioObj = new Audio.Sound();
audioObj.setOnPlaybackStatusUpdate();
await audioObj.loadAsync({ uri: myAudioSrc });
await audioObj.playAsync();
}
return (
<View style={styles.mainSpace}>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity
onPress={() => selectAudioFunct()
}
style={styles.BtnStyleIt}>
<View >
<Text style={styles.BtnTxt1}>Select Audio</Text>
</View>
</TouchableOpacity>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity
onPress={() =>
playyAudioo()
}
style={styles.BtnStyleIt}>
<View>
<Text style={styles.BtnTxt1}>PLAY</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
mainSpace: {
flex: 1,
backgroundColor: '#4d8b40',
alignItems: 'center',
justifyContent: 'center',
},
BtnStyleIt: {
margin: 10,
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: '#aaa',
alignItems: 'center',
justifyContent: 'center',
},
BtnTxt1: {
color: '#76150A',
fontSize: 20,
fontWeight: "bold",
textAlign: 'center'
},
});
输出
结果可以在线查看。
算法 2
步骤 1 − 从 'react-native' 中导入 View、Text、Button。
步骤 2 − 创建 App.js 并编写代码。
步骤 3 − 创建一个新函数并将其命名为 theonlineSong。从音频链接获取歌曲以获取音乐文件以进行测试。
步骤 4 − 创建一个新函数并将其命名为 thelocalfile 以选择存储在同一项目中的本地音频文件。
步骤 5 − 使用 react-native 中的 Button 创建按钮并从这些按钮调用上面给出的函数代码。
步骤 6 − 检查结果。
示例 2：混合在线和本地音频文件。
项目中使用的重要文件是
App.js
示例
import{Component}from'react';
import{View,Text,Button,StyleSheet}from'react-native';
import{Audio}from'expo-av';
exportdefaultclassAudioExampleTwoextendsComponent{
theonlineSong=async()=>{
awaitAudio.Sound.createAsync(
{uri:'<any_audio_file_link.mp3>'},
//Foregthislinkwasusedfordemo
//{uri:'https://pwdown.info/112168/06.%20Ek%20Aisi%20Ghazal.mp3'},
{shouldPlay:true},);}
thelocalfile=async()=>{
awaitAudio.Sound.createAsync(
{uri:require("./raining.mp3")},
{shouldPlay:true,isLooping:true},
);}
render(){
return(
<View>
<Viewstyle={{paddingTop:20}}>
<Textstyle={{
fontWeight:'bold',
fontSize:30,marginBottom:20}}
>
MixtheRainwiththeSong
</Text>
<Button
style={{paddingTop:20}}
title='OnlineSong'
color='blue'
onPress={this.theonlineSong}
>
</Button>
<Button
style={{paddingTop:20}}
title='AddtheRainSound'
color='purple'
onPress={this.thelocalfile}
>
</Button>
</View>
</View>
);
}
}
输出
结果可以在线查看。
算法 3
步骤 1 − 从 'react-native' 中导入 View、Text、Button。此外，从 'expo-av' 导入 Audio。还导入 import useState、useEffect from 'react'。
步骤 2 − 创建 App.js 并编写代码。
步骤 3 − 使用 Audio.Sound() 创建一个新的声音对象，并在其上使用 loadAsync(require<带路径的文件名>) 加载所需的声音文件。
步骤 4 − 基于标志条件尝试播放和停止文件。
步骤 5 − 使用 react-native 中的 Button 创建一个按钮，并在反转标志条件时更改按钮的颜色。
步骤 6 − 检查结果。
示例 3：启动和停止音频。
项目中使用的重要文件是
App.js
示例
import {useState,useEffect} from 'react';
import {View, Text, Button } from 'react-native';
import { Audio } from 'expo-av';
export default function AudioExampleThree() {
const [audioFlag, setaudioFlag] = useState(false)
const [rain] = useState(new Audio.Sound());
useEffect(()=>{
(async () => {
console.log('Audio Flag', audioFlag)
if (audioFlag) {
await rain.loadAsync(require("./raining.mp3"))
try {
await rain.playAsync()
} catch (e) {
console.log(e)
}
} else {
await rain.stopAsync()
await rain.unloadAsync()
}
})()
},[audioFlag, rain])
return (
<View style={{ justifyContent:"center", alignItems : "center"}}>
<Text style={{marginTop: 50, marginBottom: 50, fontSize:28}}>Rain Sound </Text>
<Buttoncolor={audioFlag ? '#d61676' : '#24dd4d'} title={'PLAY AUDIO | STOP AUDIO'} onPress={()=>setaudioFlag(!audioFlag)} />
</View>
);
}
输出
结果可以在线查看。
在本文中，使用三个不同的示例，展示了在 Expo Snack 上从不同来源播放音频的方法。首先，给出了从设备中选择任何音频文件然后播放的方法。然后演示了使用在线音频文件并将其与本地音效混合的方法。在最后一个示例中，播放
270 次查看
