Not able to use Audio Player using m3u8 file format.

[ranveersequeira]

Current Behavior

I'm using next12.1 and react18 to play audio which is coming from backend and is in m3u8 (hls) format.

Expected Behavior

It should show Audio player on page. But it's showing blank. Its only rendering

when I use m3u8 file otherwise its working fine. <ReactPlayer url={audioSrc} // url='https://www.youtube.com/watch?v=ysz5S6PUM-U' forceAudio forceHLS width='100%' height='100%' />

I have tried this also <ReactPlayer url={audioSrc} // url='https://www.youtube.com/watch?v=ysz5S6PUM-U' config={{ file: { forceAudio: true, forceHLS: true } }} width='100%' height='100%' /> I'm using like this.

Environment

• URL attempting to play: https://verito-user-data.s3.ap-south-1.amazonaws.com/6288/79cdb3bc9c4a9e073111b1beba7c4662_af94d79a-03dd-4ecc-bc55-74e027259880.m3u8
• Browser: Edge(latest)
• Operating system: windows 11

[cookpete]

You can see a CORS error in the console. You’ll have to update the CORS settings on the s3 bucket.

[ranveersequeira]

is the syntax for the file config is right? Thanks for your time.

[cookpete]

Your second example is correct, although you can also do:

<ReactPlayer
    url={audioSrc}
    config={{
        forceAudio: true,
        forceHLS: true
    }}
    width='100%'
    height='100%'
/>

[ranveersequeira]

I dont think there is issue with CORS. Because I have played URL - https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8 Mentioned on Official Website on my local using this syntax. Its blank in browser although its showing audio element in elements tab.