Question 280245 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to play the audio in React.js?

I am going to play the audio with audio data encoded in base64 format.
In the React.js, I used play() with below code.
This code works well in Laptop, but it doesnot work in mobile. I can’t hear any voice.

const [audioData, setAudioData] = useState("");

const gettingAudio = () => {
...
  setAudioData(audio_base64string);
...
};

useEffect(() => {
  audioData.play();
}, [audioData])
Tags:

2

Answers


  1. 0 
     const [audioData, setAudioData] = useState(null);

    const gettingAudio = () => {
      // ... get your base64 audio data ...
      setAudioData(`data:audio/mp3;base64,${audio_base64string}`);
    };

   // check audioData first and use the new Audio(), in useEffect like this  
    useEffect(() => {
      if (audioData) {
        let audio = new Audio(audioData);
        audio.play();
      }
    }, [audioData]);

    i hope it will work well for you.
    it is a simmilar question that i found for you , autoplay does not work on some mobiles due to user engagement requirements.
    You did what now? Why would you encode the audio as base64 !
    The user must interact with the document first (e.g., click a button) before the audio can play. If you want the audio to play automatically, you might need to add a user interaction event that triggers the play function. For example, you could add a “Play” button for the user to click.

    Login or Signup to reply.
  2. 0

    The reason this is happening to you, is because, iOS and most mobile browsers do not allow sound to automatically play through the browser for security / policy reasons. Most apps circumvent this by allow the user to toggle the audio voluntarily themselves. Such as a play button, a start game button, clicking a link or image or tag. Anything really, where the user has a choice and is accepting the audio playback request. Most mobile devices do not want websites / web apps to automatically play sound without the users performance, like i previously mentioned due to security / policy reasons and requirements. As long as they have a choice the browser usually views this an acceptable request to play the audio for the user, and plays the audio tag.

    The code below will probably work for what you are trying to do, it creates a listener for the entire window, once the user interacts with the window by touching it, it will activate any of the audios that you might be trying to load up here. Though there are some important things to note, make sure when you create the event listener that you remove it afterwards for optimization and performance reasons. Also an important catch to note is that your audio needs to be initially muted in the tag, and you’ll need to use audioRef.current = false to unmute it inside the useRef function I set up for you below here:

    Here is some code you can play around with and test:

    import React, { useEffect, useRef } from 'react';
// any time you are activally using the referenced tag, i.e. audioRef make sure to use current to to actually be able to edit the elements data here.
function Form(props) {
  const audioRef = useRef(null); // <-- used to get an element tag for manipulation logic and requests
  const startAudioHandler = useRef(()=>{ // <-- we can put our audio logic here to play.
    audioRef.muted = false; // <-- sets the audio to unmuted so that the user may here the audio sounds.
    audioRef.play(); // <-- sets the audio to play so the audio element can start playing for the active user here.

  });
  useEffect(() => {
    window.addEventListener('touchstart', startAudioHandler.current);
    return ()=> {
      window.removeEventListener('touchstart', startAudioHandler.current);
    }
  }, []);
  return (
    <React.Fragment>
      <audio ref={audioRef} id="audio" src="path/to/your/audiofile.mp3" muted></audio> {/* <-- make sure to have the audio muted, additionally make sure that you are using ref={audioRef} to have an active reference for the audio tag element for manipulation and logic stuff here.
    </React.Fragment>
  );
}

export default Form;

    This will more then likely work for mobile devices, more specifically safari where I assume you are having this issue, other mobile browsers might also have this similar security so feel free to just keep that in mind for if they do or don’t for this. Lastly if for some reason this doesn’t work, you can try doing a hacky thing where you create an invisible div that spans the entire window / browser / screen / viewport, that might circumvent any security if iOS patched this.

    Though as long as you initially have the audio elements set to not playing and muted as well, and allow the active user to "voluntarily" start or play the audio elements, the code will work no problem and you should here sounds.

    Also sorry if my english is poor, it is not my native language. Luckily we both speak javascript though hahahaha.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search