✅ – BIOLOGY SCIENCE – 12-59 Aug 9

is it possible to play an audio file which is in a format other than mp3/ogg/wav in a html file ?
28 Replies
RelativPerspektiv
i have tried .flac and it didn't work but .mp3 works fine tho also im using electron, so it should be chromium right ?
ScriptyChris
ScriptyChris3y ago
FLAC should work https://caniuse.com/?search=flac Yes Maybe you gave incorrect path? Is there any error?
RelativPerspektiv
nope, it just doesn't start so basically i have something like this - choose a file location - start to play the audio file when it has loaded and i have a button to pause and play the audio so when i choose a .flac file, the audio loads, and the code below it executes as well and no errors too, but the audio just wont play also if i hit the pause button to pause the audio, i would get an error saying, The play() request was interrupted by a call to pause() @ScriptyChris ^
ScriptyChris
ScriptyChris3y ago
Have you checked if that file is played correctly on like plain Chrome or Firefox browser (outside Electron)? So you knew that it may be Electron (or it's Chromium) fault?
RelativPerspektiv
chrome and firefox are also made by chromium right ? anyways ill check on it
ScriptyChris
ScriptyChris3y ago
No. Chrome is based on Chromium and Firefox is completely separate browser Google has Chromium, which is an open-sourced browser project and many browsers are based on it (like Brave, Opera) + they have Chrome, which is also based on Chromium, but is closed source browser Mozilla has Firefox browser, which is not related to Chrome/Chromium
RelativPerspektiv
error in chrome DOMException: The element has no supported sources. error in firefox DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable. code
<html>
<body>
<audio src="Shape Of You.flac"></audio>
<button>play</button>

<script>
const button = document.querySelector('button');

const audio = document.querySelector('audio');

button.onclick = () =>
{
audio.play().then(() => console.log('playing')).catch(x => console.log(x));
};
</script>
</body>
</html>
<html>
<body>
<audio src="Shape Of You.flac"></audio>
<button>play</button>

<script>
const button = document.querySelector('button');

const audio = document.querySelector('audio');

button.onclick = () =>
{
audio.play().then(() => console.log('playing')).catch(x => console.log(x));
};
</script>
</body>
</html>
i get the errors when i use a local host with node to boot up the site but when i open the html normally - in firefox the audio plays and playing is printed in the console - in chrome the audio doesn't play and playing is printed in the console
ScriptyChris
ScriptyChris3y ago
Check what content-type is given to that .flac file when you load page "normally" and how when you load it via HTTP. I assume that your server doesn't set correct content-type Check for response headers for that audio file request https://developer.chrome.com/docs/devtools/network/reference/#headers You can also try using <source> element
<audio controls>
<source src="Shape Of You.flac" type="audio/flac" />
</audio>
<audio controls>
<source src="Shape Of You.flac" type="audio/flac" />
</audio>
RelativPerspektiv
i did give the content type as text/html while i was doing in the node server this was the code to the local host btw const http = require('http');
const fs = require('fs');

const port = 3000;

const server = http.createServer((req, res) =>
{
const data = fs.readFileSync('index.html');

res.writeHead(200, {'Content-Type' : 'text/html'});

res.write(data);

res.end();
});

server.listen(port, (e) =>
{
if (e) { console.log(e) }
else { console.log(port); }
});
const fs = require('fs');

const port = 3000;

const server = http.createServer((req, res) =>
{
const data = fs.readFileSync('index.html');

res.writeHead(200, {'Content-Type' : 'text/html'});

res.write(data);

res.end();
});

server.listen(port, (e) =>
{
if (e) { console.log(e) }
else { console.log(port); }
});
ScriptyChris
ScriptyChris3y ago
No, text/html is for text as html and you are sending audio as flac - these are different things I mean, you should have set different content-type for the audio stuff,
RelativPerspektiv
im sending the html file right ?? .. im sorry i not sure abt the local server and stuff
ScriptyChris
ScriptyChris3y ago
HTML is the page, but that HTML contains <audio> element, which requests for audio file, which is another request and needs another content-type Check for Network tab
RelativPerspektiv
yes yes it says audio/flac for the audio how do i do that ? just change the content type ? in here ?
ScriptyChris
ScriptyChris3y ago
const server = http.createServer((req, res) =>
{
if (req.url.endsWith('html')) {
const data = fs.readFileSync('index.html');

res.writeHead(200, {'Content-Type' : 'text/html'});

res.write(data);
} else if (req.url.endsWith('flac')) {
res.writeHead(200, {'Content-Type': 'audio/flac'});
res.write(fs.readFileSync( /* path to that audio file - might be hardcoded for testing */ )
} else {
console.lg(`Some other URL "${req.url}". Ignoring it...`)
}

res.end();
});
const server = http.createServer((req, res) =>
{
if (req.url.endsWith('html')) {
const data = fs.readFileSync('index.html');

res.writeHead(200, {'Content-Type' : 'text/html'});

res.write(data);
} else if (req.url.endsWith('flac')) {
res.writeHead(200, {'Content-Type': 'audio/flac'});
res.write(fs.readFileSync( /* path to that audio file - might be hardcoded for testing */ )
} else {
console.lg(`Some other URL "${req.url}". Ignoring it...`)
}

res.end();
});
RelativPerspektiv
nothing loads up now 😢
ScriptyChris
ScriptyChris3y ago
Any logs in Node console? Add console.log('req.url:', req.url) before first if. Restart server, reload page and show output of Node's console
RelativPerspektiv
i have this code rn, it loads atleast
// if (req.url.endsWith('html')) {
const data = fs.readFileSync('index.html');

res.writeHead(200, {'Content-Type' : 'text/html'});

res.write(data);

if (req.url.endsWith('flac')) {
res.writeHead(200, {'Content-Type': 'audio/flac'});
res.write(fs.readFileSync('Shape Of You.flac'))
}

res.end();
// if (req.url.endsWith('html')) {
const data = fs.readFileSync('index.html');

res.writeHead(200, {'Content-Type' : 'text/html'});

res.write(data);

if (req.url.endsWith('flac')) {
res.writeHead(200, {'Content-Type': 'audio/flac'});
res.write(fs.readFileSync('Shape Of You.flac'))
}

res.end();
and the error is GET http://localhost:3000/Shape%20Of%20You.flac net::ERR_INVALID_CHUNKED_ENCODING 200 (OK)
PS E:\Code\Common\web> node app.js
3000
req.url: /
req.url: /Shape%20Of%20You.flac
req.url: /favicon.ico
PS E:\Code\Common\web> node app.js
3000
req.url: /
req.url: /Shape%20Of%20You.flac
req.url: /favicon.ico
ScriptyChris
ScriptyChris3y ago
Ok, so change .endsWith('html') to .endsWith('/')
RelativPerspektiv
still doesn't play current code
if (req.url.endsWith('/')) {
const data = fs.readFileSync('index.html');

res.writeHead(200, {'Content-Type' : 'text/html'});

res.write(data);
}

else if (req.url.endsWith('flac')) {
res.writeHead(200, {'Content-Type': 'audio/flac'});
res.write(fs.readFileSync('Shape Of You.flac'))
}

res.end();
if (req.url.endsWith('/')) {
const data = fs.readFileSync('index.html');

res.writeHead(200, {'Content-Type' : 'text/html'});

res.write(data);
}

else if (req.url.endsWith('flac')) {
res.writeHead(200, {'Content-Type': 'audio/flac'});
res.write(fs.readFileSync('Shape Of You.flac'))
}

res.end();
ScriptyChris
ScriptyChris3y ago
In neither browser?
RelativPerspektiv
oh firefox works
ScriptyChris
ScriptyChris3y ago
SO maybe Chrome doesn't support flac 🤔
RelativPerspektiv
so does electron ?
ScriptyChris
ScriptyChris3y ago
Probably yes. But i don't have much experience with it, so you might Google Electron issues with Flac or ask at #general-tech
RelativPerspektiv
okay sure, thanks for your help ill prolly ask this in the electron server as well
ScriptyChris
ScriptyChris3y ago
👍
reactibot
reactibot3y ago
This question has an answer! Thank you for helping 😄 If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1006547284298834020 This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1006547284298834020