I am working on a listing module which includes an audio element for each row. I need to fetch mp3/wav files from an API and bind them correctly with the src attribute of the audio element.
Below is my code snippet:
JSmethods:{
playa(recording_file) => {
try {
const requestOptions = {
method: 'POST',
responseType: 'arraybuffer',
headers: {
'Content-Type': 'application/json',
//'Authorization': 'Bearer ' + localStorage.getItem('jwt')
},
};
const response = axios.post(`api/playrecfile?rec=${recording_file}`)
const mp3 = new Blob([response.data], { type: 'audio/mp3' })
const url = URL.createObjectURL(mp3);//tried window.
return url;
} catch (e) {
console.log('play audio error: ', e)
}
}
}
In the HTML (cell of a row), I can see the data and have checked the value of meta as well.
<div :class="classes" @click="click(data)" v-else-if="name=='Play'" title='Play'>
<audio controls :ref="'audio'+data.recording_file" v-if="meta.is_admin==1 && data.recording_filename" :src="playa(data.recording_filename)">
</audio>
<span v-else @click="givealert()">
<i class="fa fa-play"></i>
</span>
</div>
PHP/Laravel
$out = isset($request->out) ? $request->out : "mp3";
header("Content-type: audio/x-$out");
header("Content-disposition: attachment; filename=tuzbd.$out");
header("Access-Control-Allow-Origin: *");
$file = base_path(). "/storage/app/recs/2019/05/03/tuzbd.mp3";
header("Content-length: " . filesize($file));
readfile($file);
return;