✅ – 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

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

RelativPerspektiv•3y 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 ?

ScriptyChris•3y ago

FLAC should work https://caniuse.com/?search=flac Yes Maybe you gave incorrect path? Is there any error?

RelativPerspektiv•3y 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 ^

ScriptyChris•3y 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•3y ago

chrome and firefox are also made by chromium right ? anyways ill check on it

ScriptyChris•3y 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•3y 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

ScriptyChris•3y 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•3y 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); }
});

ScriptyChris•3y 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•3y ago

im sending the html file right ?? .. im sorry i not sure abt the local server and stuff

ScriptyChris•3y 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•3y ago

yes yes it says audio/flac for the audio how do i do that ? just change the content type ? in here ?

ScriptyChris•3y 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();
});