1

I have one track which I want to add in background and one recorded audio. I want to merge both the audios and make it one, than play that merged audio. Can anyone help me out how to merge audios and than play it.

Abhi Thakkar
  • 151
  • 4
  • 17

2 Answers2

2

You can't merge files at client side. If you only want to play both together you can just play them together. 

<audio id="myAud">  
  <source src="sounds/1.mp3" type="audio/mpeg">
</audio>
<audio id="myAud2">  
  <source src="sounds/2.mp3" type="audio/mpeg">
</audio>

<script>


var audio1 = document.getElementById("myAud");
var audio2 = document.getElementById("myAud2");

audio1.play();
audio2.play();


</script>

Or if you choose to play one after another: 

<script>


var audio1 = document.getElementById("myAud");
var audio2 = document.getElementById("myAud2");

audio1.play();
audio1.addEventListener('ended', function() {
    // first one complete play next..
audio2.play();
},false);

</script>
Jawad Khan
  • 343
  • 1
  • 7
  • Thanks for the reply @jawadkhan, Are you sure that merging can't we achived client side? as i am currently working on the project, in which android and IOS apps already did that and now I need to achieve that in web (vue.js). – Abhi Thakkar May 05 '20 at 13:08
  • Yes the processing needs to done at server-side. You can however achieve this without reloading the page for-example sending request to the server through ajax. You can explore FFMPEG library. you will need to install it at your server. Also check this answer: https://stackoverflow.com/questions/32043251/joining-multiple-audio-files-into-a-single-audio-file-in-client-side – Jawad Khan May 05 '20 at 13:14
0

If you always play these two files together, I suggest you to merge them with ffmpeg. Otherwise why not play the first file and at the end of this file play the other (How to detect an audio has finished playing in a web page?) ?

digitalTrilunaire
  • 97
  • 1
  • 13
  • Can i merge them client side? if yes than please show me the code if possible. and I want to play both audio parallel – Abhi Thakkar May 05 '20 at 13:05
  • As already said by jawadkhan, I this this needs to be done on server side. Audio file are encoded and inside a container (like a mp3 container containing metadata and audio data). Merging theses two files need tools for parsing container structure, and you can not be sure that these tools are on client side or supported by client browser. You said that you already have iOS and android app doing that, it is with a library linked to the application? FFmpeg commands depends of the codec used and others, but you can look at https://www.reddit.com/r/ffmpeg/comments/7kpqxa/merging_two_audio_files/ – digitalTrilunaire May 05 '20 at 15:42