i having problem with migration, as i had play audio file(mp3) feature on my twilio app before and it quite important for me, so i want to add this feature for my zoom videosdk, but i don’t want to use share video feature from zoom to share the audio, as i want simply just click the play audio button to playing the audio file(mp3) to all the participants in the room. please help me. many thanks
Hey @it.apps2
I assume you are using the Video SDK Web. In that case, you can use the stream.startAudio({ mediaFile: [mp3 url] }) method to achieve this.
Thanks
Vic
thanks for your reply, but i have a new issue rises now, as you mention that i need to use stream.startAudio({ mediaFile: [mp3 url] }) → but the problem is i’ve got no idea how to convert my mp3 file as HTMLAudioElement to MediaPlaybackFile ?. could you help me. many thanks
Hey @it.apps2
Do you have the URL for the MP3 on the HTMLAudioElement?
This will be the url attribute in MediaPlaybackFile.
Additionally, currentTime indicates the starting point of the playback in the MP3, and loop specifies whether the audio should be played on a loop.
Thanks
Vic
Hi @vic.yang
it’s been okay now, this is my code :
const bgAudio: any = document.getElementById(‘bgaudio’) as HTMLAudioElement;
await mediaStream?.startAudio({ mediaFile: bgAudio});
but it couldn’t play or publish the audio. do i have lack something here ? please help me. thanks
Hey @it.apps2
Here is the modified version based on your code. Please try it out and let me know if it works for you.
const bgAudio: any = document.getElementById("bgaudio") as HTMLAudioElement;
const url = bgAudio?.src;
const loop = !!bgAudio?.loop;
await mediaStream?.startAudio({ mediaFile: { url, loop } });
Thanks
Vic
Hi @vic.yang
many thanks for your help and kept replying my question, i’ve had already follow your instruction and put your work on my code, but it still the same, the audio can’t be played.
i will proved my full code for your review :
const bgAudio: any = document.getElementById(‘bgaudio’) as HTMLAudioElement;
const responseTemp = await fetch(‘my API’, {
method: ‘POST’,
headers: {
Accept: ‘application/json’,
‘Content-Type’: ‘application/json’,
}
});
const audioSourceFile = await responseTemp.blob();
const urlAudio = window.URL.createObjectURL(audioSourceFile);
bgAudio.src = urlAudio;
const url = bgAudio?.src;
const loop = !!bgAudio?.loop;
await mediaStream?.startAudio({ mediaFile: { url, loop } });
please review this. many thanks
Hey @it.apps2
I added some comments on your code, please try it out again and let me know if it works for you.
// const bgAudio: any = document.getElementById('bgaudio') as HTMLAudioElement; // There's no need for an audio element, as the Video SDK will handle it.
// const responseTemp = await fetch('my API', {
// method: 'POST',
// headers: {
// Accept: 'application/json',
// 'Content-Type': 'application/json',
// }
// });
// const audioSourceFile = await responseTemp.blob();
// const urlAudio = window.URL.createObjectURL(audioSourceFile);
// bgAudio.src = urlAudio;
const url = mp3URL; // Make sure the URL is same-origin or cross-origin with CORS headers
const loop = true; // If you need to loop the playback; otherwise, set it to false.
await mediaStream?.startAudio({ mediaFile: { url, loop } });
Thanks
Vic
Hi @vic.yang
i need this code:
const responseTemp = await fetch(‘my API’, {method: ‘POST’,
headers: {Accept: ‘application/json’,
‘Content-Type’: ‘application/json’,}});
the code is to take the source of my audio file(mp3), so it can’t be removed, and also i just notice that the code from you :
const bgAudio: any = document.getElementById(“bgaudio”) as HTMLAudioElement;
const url = bgAudio?.src;
const loop = !!bgAudio?.loop;
await mediaStream?.startAudio({ mediaFile: { url, loop } });
it has an error which coming from { mediaFile: {url, loop } } → url variable got an error message Object literal may only specify known properties, and ‘url’ does not exist in type ‘MediaPlaybackFile’
i think the problem was the url variable for the mediaFile because it has an error. i hope you have another solution for this.
many thanks for your help
Hey @it.apps2
Following is the changed code, please try it out again and let me know if it works for you.
const responseTemp = await fetch('my API', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
}
});
const audioSourceFile = await responseTemp.blob();
const urlAudio = window.URL.createObjectURL(audioSourceFile);
const url = urlAudio; // Make sure the URL is same-origin or cross-origin with CORS headers
const loop = true; // If you need to loop the playback; otherwise, set it to false.
await mediaStream?.startAudio({ mediaFile: { url, loop } });
Thanks
Vic
it still has the same issue which coming from mediaFile where the urlNew got an error and the error message is :
i think the urlNew variable needs to convert to MediaPlaybackFile, but i dont know how to convert it.
thanks
Hey @it.apps2
Thank you for sharing the screenshot of the actual error message.
This issue is related to parameter passing. In the previous example I provided, object shorthand notation was used. In your code, you can write it as follows:
await mediaStream?.startAudio({ mediaFile: { url:urlNew, loop } });
Thanks
Vic
Hi @vic.yang
thanks a lot for your help, i think the problem has solved, but i got a new issue. the problem is that i am the one who couldn’t hear the voice from my audio file while playing( the other participants in the room have no problem, they can hear the voice coming from the audio file when i triggered the audio file by clicking the play button). do you have any solution for this problem ? as i don’t know if the audio is start or stop because i can’t hear the voice.
thanks a lot
Hey @it.apps2
This is a limitation of our current implementation. The media playback sender will not output the sound of the playback.
We will support this feature in future versions.
Thanks
Vic
Hi @vic.yang
thanks for all your help, but do you have any solutions for this problem ? maybe using share audio (the same method with share screen) ? so i also can hear the voice that i play.
Thanks