Hi all, looking for input on this one. I'm building an audio player inside my app. Simple enough. The trick is though that I want to override the user-agent of the audio call to that of my app to register for any listen analytics (think: podcasts, etc).
Many hours/rounds with GPT later, it turns out the best way to do that in Wappler is to proxy the audio call with a custom route and fetch+pipe the audio (which allows a header change). The code for such a custom route looks like:
const https = require('https');
const http = require('http');
const { parse } = require('url');
exports.handler = function(app) {
app.get('/audio/proxy', (req, res) => {
const episodeUrl = req.query.url;
console.log('Audio proxy hit:', req.query.url);
if (!episodeUrl) return res.status(400).end('Missing URL');
const parsedUrl = parse(episodeUrl);
const protocol = parsedUrl.protocol === 'https:' ? https : http;
const headers = {
'User-Agent': 'MyDomainPlayer/1.0 (+https://yourdomain.com)',
};
if (req.headers.range) {
headers['Range'] = req.headers.range;
}
const proxyReq = protocol.get(episodeUrl, { headers }, (proxyRes) => {
res.writeHead(proxyRes.statusCode, proxyRes.headers);
proxyRes.pipe(res);
});
proxyReq.on('error', (err) => {
console.error('Proxy error:', err.message);
res.status(500).end('Proxy error');
});
proxyReq.setTimeout(10000, () => {
proxyReq.abort();
res.status(504).end('Proxy timeout');
});
});
};
Which front end can then be simply
<audio controls preload="none">
<source src="/audio/proxy?url=https%3A%2F%2Fwww.something.mp3" type="audio/mpeg">
</audio>
The trick is getting Wappler to natively load the custom route from /extensions/. I could do it via editing app.js, but I shy from messing with Wappler native files. Any thoughts on how to stand up custom route code?