R
Reactiflux
✅ – BIOLOGY SCIENCE – 12-59 Aug 9
✅ – 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 ?
It should be possible - browsers support multiple audio formats
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#index_of_media_container_formats_file_types
i have tried .flac and it didn't work
but .mp3 works fine tho
also im using electron, so it should be chromium right ?
FLAC should work https://caniuse.com/?search=flac
Yes
Maybe you gave incorrect path? Is there any error?
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 ^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?
chrome and firefox are also made by chromium right ?
anyways ill check on it
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
error in chrome
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
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>
playing is printed in the console
- in chrome
the audio doesn't play and playing is printed in the consoleCheck 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>
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); }
});
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,im sending the html file right ?? .. im sorry i not sure abt the local server and stuff
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 tabyes yes
it says audio/flac for the audio
how do i do that ?
just change the content type ?
in here ?
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();
});
nothing loads up now 😢
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 consolei have this code rn, it loads atleast
and the error is
// 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();
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
Ok, so change
.endsWith('html') to .endsWith('/')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();
In neither browser?
oh firefox works
SO maybe Chrome doesn't support flac 🤔
so does electron ?
Probably yes. But i don't have much experience with it, so you might Google Electron issues with Flac or ask at #general-tech
okay sure, thanks for your help
ill prolly ask this in the electron server as well
👍
2 Messages Not Public
Sign In & Join Server To View
Looking for more? Join the community!
R
Reactiflux
✅ – BIOLOGY SCIENCE – 12-59 Aug 9
R
Reactiflux
✅ – BIOLOGY SCIENCE – 12-59 Aug 9
Want results from more Discord servers?
Recommended PostsEvokeMe – 11-02 Aug 9`includes`_mercury – 11-01 Aug 9why contains is not accepted here
```js
if (!Object.keys(labels).contains('0')) {
setLabel✅ – BIOLOGY SCIENCE – 06-59 Aug 7```js
console.time('time');
['', '', '', '', ''].forEach(functionToDoStuff);
console.timeEnd('timeVuNguyen – 12-55 Aug 6is there any SEO channel? I wanna increase my website's rank, do I have to put many keywords into evAdi – 19-33 Aug 5I had one doubt based on performance. I am loading shadow DOM component and then making API call to