在 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 − 检查结果。


Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例 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 上从不同来源播放音频的方法。首先，给出了从设备中选择任何音频文件然后播放的方法。然后演示了使用在线音频文件并将其与本地音效混合的方法。在最后一个示例中，播放

更新于： 2023 年 5 月 2 日

270 次查看

开启你的 职业生涯

通过完成课程获得认证

开始
广告