2

I am making an audio player in reactjs that looks like this app, song box is rendered in map function and on click on any song box it start playing, but the problem is when click on next song to change the track, the audio src value gets changed but previous song did not stop playing,

any Help?



function playMusic(audio: HTMLAudioElement) {}

function handleMusicPlayer(index: number) {

    let audio = new Audio(props.musicData[index].track.preview_url);
    audio.play();
    playMusic(audio);

    if (musicMinimize) {
        props.onPlay(false);
        setmusicMinimize(false);
        setTimeout(() => {
            setmusicMinimize(true);
            props.onPlay(true);
        }, 1000);
    } else {
        props.onPlay(false);
        setmusicMinimize(true);
    }
    
    props.onCurrent({
        image: props.musicData[index].track.album.images[0].url,
        name: props.musicData[index].track.name,
        track: props.musicData[index].track.preview_url
    });

}

function handleMusicPlayer get run when song box clicked, and function playMusic should control the playing of current and next song

abhi jain
  • 41
  • 1
  • 5

2 Answers2

0

You can solve it with stopping all audios in that page before start new one:

Here is example;

const player = document.getElementById('player');
player.addEventListener('click', (event) => {
var myId    = event.target.getAttribute('href');
var audio   = document.getElementById(myId);
document.querySelectorAll('audio').forEach(sound => {
sound.pause();
});
audio.play();
})
<audio id="myAudio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<audio id="myAudiotwo" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"></audio>


<p>Click the buttons to play or pause the audio.</p>
<div id='player'>
<button  href="myAudio" type="button">Play Audio</button>
<button  href="myAudiotwo" type="button">Play Audio</button>
</div>
imtaki company
  • 21
  • 3
  • that's absolutely fine, but how we can do it in reactjs , the song data is in array, handleMusicPlayer function call when click on music box it should play music, and when again any other music box gets clicked, old one should stop and new one start playing – abhi jain Oct 30 '22 at 08:31
  • do u use redux ? or just pure react for states? both of them have differentway – imtaki company Oct 30 '22 at 09:08
  • but for both way u have to make each audio box in a components... and u have to control that components from upper component... that will change state if u click one state... – imtaki company Oct 30 '22 at 09:09
  • i use redux for login logout state management, I have never think of using redux over music control, I am able to play music by clicking on music box, but whenever a new song played I want to stop old one – abhi jain Oct 30 '22 at 09:15
  • even this logic also failed https://stackoverflow.com/questions/38067516/javascript-audio-pause-previous-playing-audio-when-current-playing-in-react – abhi jain Oct 30 '22 at 09:16
  • first -- > you need to dispatch all audios "pause" from redux... button click stop all function from redux action... and after that worked.. in inner play component same function wait for that finish and than play target component play... that is the most I can do with no code by yourside... – imtaki company Oct 30 '22 at 10:30
  • how can I send audio "pause" to redux, I mean I can send song url string to redux, but how can I send HTMLAudioElement to redux – abhi jain Oct 30 '22 at 16:46
  • export interface Music { name: string; image: string; track: string; } const initialState = { name: "", image: "", track: "", } as Music; const musicSlice = createSlice({ name: "music", initialState, reducers: { MusicPlay(state, action: PayloadAction) { state.image = action.payload.image; state.name = action.payload.name; state.track = action.payload.track; }, }, }); here's my redux code for current song storage – abhi jain Oct 30 '22 at 17:17
  • you wont send audio element.. you will create a play song object or element in redux.. and if it will be tru than play.. if it will be false than stop.. than you dispatch element that will turn it false when push button etc... it is not as simple.. and your codes that share with as not enough to explain you more... – imtaki company Oct 31 '22 at 09:29
  • it still not working, i think you guys are not understanding what I wanted to acheive, well it's like music app, which detects click, and pause the old instance of song when a new song gets clicked, – abhi jain Nov 03 '22 at 02:03
0
const ref = useRef(new Audio());

ref.current.pause()

ref.current = new Audio("new_song");

ref.current.play()
abhi jain
  • 41
  • 1
  • 5