[Solved] Play audio on website

[JVKran]

Hi there!

I'm currently facing a challenge where I need to play wav audio files on an HTML website. To give an impression of the codebase, let's say there's an SD card connected with SPI and we're using the fileserver example.

This example has been modified with the following piece of code to enable audio controls to be visible.

Code: Select all

	httpd_resp_sendstr_chunk(req, "<tr><td><audio controls><source src=\"");
        httpd_resp_sendstr_chunk(req, req->uri);
        httpd_resp_sendstr_chunk(req, entry->d_name);
        if (entry->d_type == DT_DIR) {
            httpd_resp_sendstr_chunk(req, "/");
        }
        httpd_resp_sendstr_chunk(req, "\" type=\"audio/wav\">");
        httpd_resp_sendstr_chunk(req, "</audio></td><td>");

This however, (of course) results in all files first being sent to the laptop. Is anyone aware of another way to play files on the website itself?

Kind regards,

An interested Jochem

[fasani]

Do not really fully understand what you are trying to do here.
If the html downloaded in the browser contains references to all audio .wav files yes then they will trigger the requests and be loaded in the browser. But are you serving all this from the ESP32?
Downloading the full audio is what most browsers do, more info here:
https://stackoverflow.com/questions/431 ... -then-play

And are you trying to find a way that this is downloaded only when you click play?

[JVKran]

Hi Fasani,

I'm sorry for causing any confusion. I'm trying to play wav files that're stored on the SD-card that's connected to the ESP32 via SPI. The webserver is indeed hosted on the ESP32. For being overly clear; the content of said wav files should, for example, be played by the speakers of a smartphone or laptop.

Thanks for clearing up that the files are indeed requested and loaded and for the linked stack overflow post. I'm not too familiar with the web-development field.

Only downloading when clicking play could be a solution I presume, but as of now I'm open to any solution. Hehe.

Kind regards,

Jochem

[JVKran]

Hi there!

Thanks to Fasani's last post, I decided to go on a little web-development trip to stack-overflow where I found this post that suggested using 'preload="none"'.

As the name suggests, it prevents preloading all files and only makes a GET-request whenever the audio is supposed to be played back. To any future visitors; this is the solution.

Code: Select all

	httpd_resp_sendstr_chunk(req, "<audio controls preload=\"none\"><source src=\"");
        httpd_resp_sendstr_chunk(req, req->uri);
        httpd_resp_sendstr_chunk(req, entry->d_name);
        if (entry->d_type == DT_DIR) {
            httpd_resp_sendstr_chunk(req, "/");
        }
        httpd_resp_sendstr_chunk(req, "\" type=\"audio/wav\">");
        httpd_resp_sendstr_chunk(req, "</audio>");

Kind regards,

Jochem

[fasani]

Nice Jochem! Glad it worked.

You can edit the title of this forum entry and add [SOLVED] at the beginning so it's easier to recognize that you found a solution.