CODEWITHSUNDEEP
react-nativeexpoexpo-av
Biswas Sampad
Biswas Sampad

Reputation: 451

error while playing the audio TypeError: sound.current.playAsync is not a function

I am trying to use expo/av to create a music player in React - Native . But i am Facing the error

error while playing the audio TypeError: sound.current.playAsync is not a function

Here is my code below :

import React, { useState, useEffect } from "react";
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
import { Audio } from "expo-av";
import Icon from "../icon/icon";
import { Slider } from "react-native-range-slider-expo";
import { AntDesign } from '@expo/vector-icons'; 

const SampleTrack = require("../../assets/audioFile/Hello.mp3")

const AudioPlayer = () => {


  const [Loaded,SetLoaded] = useState(false);
  const [Loading,SetLoading] = useState(false);
  const [Playing,SetPlaying] = useState(false);


  const sound = React.useRef(new Audio.Sound());

  useEffect(()=>{
    LoadAudio();
  },[]);

  const PlayAudio = async ()=>{
    try{
      const result = await sound.current.getStatusAsync();
      if(result.isLoaded){
        if(result.isPlaying === false){
          sound.current.playAsync();
          SetPlaying(true)
        }
      }
    }catch(e){
      console.log('error while playing the audio',e)
    }
  };

  const PauseAudio = async() =>{
    try{
      const result = await sound.current.getStatusAsync();
      if(result.isLoaded){
        if(result.isPlaying === true){
          sound.current.pauseAsync();
        }
      }
    }catch(e){
      console.log("error while pausing the audio",e)
    }
  }

  const LoadAudio = async() =>{
    SetLoading(true);
    const checkLoading = await sound.current.getStatusAsync();
    if(checkLoading.isLoaded == false){
      try{
        const result = await sound.current.loadAsync(SampleTrack,{},true);
        if(result.isLoaded === false){
          SetLoading(false);
          console.log('Unknown error while loading audio')
        }else{
        SetLoading(false);
        SetLoaded(true)  
        }
      }catch(e){
        console.log('error while loading the audio',e)
        SetLoading(false)
      }
    }else{
      console.log(checkLoading)
      SetLoading(false)
    }
  }

  

  return (
    <View style={styles.container}>
      {Playing ? <View style={styles.button}>
      <TouchableOpacity onPress={() => PauseAudio()}>
      <AntDesign name="pause" size={24} color="black" />
          
        </TouchableOpacity> 
      </View> : <View style={styles.button}>
      <TouchableOpacity onPress={() => PlayAudio()}>
      <Icon name="playButton" fill={"#858787"} height={20} />
        </TouchableOpacity> 
      </View>}
      <View style={styles.lineContainer}>
        {/* <View style={styles.line}>
          <View style={styles.progressbar}></View>
          <View style={styles.bulb}></View>
        </View> */}
        <Seekbar></Seekbar>
      </View>
    </View>
  );
};

I am trying to use Async functions as per the documentation (used ref to init the audio class and using the require to get the audio for the local storage and it seems not working) but any of it is not working as seems ,I am seriously stuck . Any kind of help is appreciated.

Upvotes: 1

Views: 969

Answers (1)

Elliot Waite
Elliot Waite

Reputation: 148

I'm running into this same issue and haven't figured out how to get playAsync() to work yet, but a workaround I've found is to use setStatusAsync() instead of any of the convenience methods.

So you could try replacing:

sound.current.playAsync()

... with:

sound.current.setStatusAsync({ shouldPlay: true })

Upvotes: 3

Related Questions