How to save an audio stream as a file and play it in php and html

Question

I have created a text to speech program using an API from https://www.voicerss.org/

The program plays the audio directly in the browser. This is done with

header('Content-Type: audio/mpeg');
header("Content-Disposition:inline;filename=audio.mp3");

After my header statements I have Curl code

$curl = curl_init();

curl_setopt_array($curl, [
    CURLOPT_URL => "https://voicerss-text-to-speech.p.rapidapi.com/?key=MY-KEY&src=$src&hl=$language_code&r=0&c=mp3&f=8khz_8bit_mono&v=$voice",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
    CURLOPT_HTTPHEADER => [
        "X-RapidAPI-Host: voicerss-text-to-speech.p.rapidapi.com",
        "X-RapidAPI-Key: MY-KEY"
    ],
]);

$response = curl_exec($curl);
$err = curl_error($curl);



curl_close($curl);

if ($err) {
    echo "cURL Error #:" . $err;
} else {
    echo $response;
}
echo '<audio src="' . $voice['response'] . '" id="sound" autoplay="autoplay" preload="auto"></audio>';

This produces an audio player that plays the fetched audio.

I would like to add HTML5 visualizer to create visual effect when the voice is heard. My problem is all the examples I have seen work by first the user uploading the file.

I have tried changing the headers so that I could download the file and then play it and show the visualizer

header("Content-Disposition:attachment;filename=\"audio.mp3\"");

This resulted in a 502 server gateway error.

Am I approaching this all wrong? Should I be trying to use html5 visualizer or is there a better way to get a visual representation of the audio?

How to save an audio stream as a file and play it in php and html

0 Answers0