Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

119
Views
audio play & pause in react

I'm trying to make a music app, I can start the audio fine, but when it comes to pausing it's not working this is the code :

const handlePlay = (id) => {
    console.log(id);
    audio && audio.pause();
    fetch(`https://spotify23.p.rapidapi.com/tracks/?ids=${id}`, options)
      .then((response) => response.json())
      .then((response) => {
        console.log(response.tracks);
        return response.tracks[0].preview_url;
      })
      .then((response) => {
        setAudio(new Audio(response));
        audio.play();
      })
      .catch((err) => console.error(err));
  };

so I'm calling an API and getting the audio link here to play the audio :

setAudio(new Audio(response));
audio.play(); 

and at the top of the function I have this to check if audio is not null and if it is not so pause, like so:

audio && audio.pause();

but it's not working it's stacking the audio together, and even if I press on another audio it played the first one pressed

this is the react code that triggers handle play for each audio available :

{tracks &&
            tracks.map((track) => (
              <div
                className="w-full h-1/12 p-4 hover:bg-gray-300 hover:bg-opacity-20 hover:text-emerald-500 cursor-pointer  transition duration-150 "
                key={track.data.id}
                onClick={() => handlePlay(track.data.id)}
              >
                <div className="flex items-center ">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    className="w-6 h-6 mr-2"
                  >
                    <path
                      fillRule="evenodd"
                      d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
                      clipRule="evenodd"
                    />
                  </svg>

                  <h1 className="text-xl ">{track.data.name}</h1>
                </div>
                <div className="text-sm font-thin">
                  by{" "}
                  {track.data.artists.items.map((artist) => (
                    <span key={artist.uri} className="">
                      {artist.profile.name}
                    </span>
                  ))}
5 months ago · Santiago Trujillo
1 answers
Answer question

0

The problem is likely here:

setAudio(new Audio(response));
audio.play(); 

The setAudio function is asynchronous, so it will not immediately update the value for the audio state variable. That means that when you immediately invoke audio.play(), it is going to play the previous audio value.

If you want the audio to play automatically once it is loaded, then you can remove the audio.play() invocation in the fetch callback, and then add a useEffect hook to take care of that:

useEffect(() => {
  audio && audio.play();
}, [audio]);
5 months ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.