資料結構
網路
關係資料庫管理系統
作業系統
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 次檢視
