✅ – 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 ?
S
ScriptyChris618d ago
R
RelativPerspektiv618d ago
i have tried .flac and it didn't work but .mp3 works fine tho also im using electron, so it should be chromium right ?
S
ScriptyChris618d ago
FLAC should work https://caniuse.com/?search=flac Yes Maybe you gave incorrect path? Is there any error?
R
RelativPerspektiv618d ago
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 ^
S
ScriptyChris618d 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?
R
RelativPerspektiv618d ago
chrome and firefox are also made by chromium right ? anyways ill check on it
S
ScriptyChris618d 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
R
RelativPerspektiv618d ago
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
S
ScriptyChris618d 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>
R
RelativPerspektiv618d ago
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); }
});
S
ScriptyChris618d 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,
R
RelativPerspektiv618d ago
im sending the html file right ?? .. im sorry i not sure abt the local server and stuff
S
ScriptyChris618d 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
R
RelativPerspektiv618d ago
yes yes it says audio/flac for the audio how do i do that ? just change the content type ? in here ?
S
ScriptyChris618d 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();
});
R
RelativPerspektiv618d ago
nothing loads up now 😢
S
ScriptyChris618d 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
R
RelativPerspektiv618d ago
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
S
ScriptyChris618d ago
Ok, so change .endsWith('html') to .endsWith('/')
R
RelativPerspektiv618d ago
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();
S
ScriptyChris618d ago
In neither browser?
R
RelativPerspektiv618d ago
oh firefox works
S
ScriptyChris618d ago
SO maybe Chrome doesn't support flac 🤔
R
RelativPerspektiv618d ago
so does electron ?
S
ScriptyChris618d 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
R
RelativPerspektiv618d ago
okay sure, thanks for your help ill prolly ask this in the electron server as well
S
ScriptyChris618d ago
👍
UU
Unknown User617d ago