Audio is not playing in html

html audio web pug

18,717

Solution 1

You can dynamically generate an audio player, I believe your problem is getting the correct path to your mp3. Use this code and change the src value on line 6. When in doubt, use the absolute path or in your case a relative path of ../songs/Remember-The-Name.mp3

var audio = document.createElement('audio');
var source = document.createElement('source');
var media = document.getElementById('media');
media.appendChild(audio);
audio.appendChild(source);
source.setAttribute('src', 'https://glpro.s3.amazonaws.com/_util/smpte/111.mp3');
source.setAttribute('type', 'audio/mpeg');
audio.setAttribute('controls', 'controls');

<section id="media"></section>

Solution 2

Try this.. It works..

Add .. to goto previous directory and use type="audio/mpeg"

<body>
    <li>
        <audio controls>
            <source src="../songs/Remember-The-Name.mp3" type="audio/mpeg">
         </audio>
    </li>
<body>

18,717

Author by

beekeeper

I am a passionate coder that enjoys coding as a hobby ever since I started in 2015

Updated on June 04, 2022

Comments

beekeeper about 2 years
I have music stored in a separate folder that I am trying to play, however the music won't play. Any idea why? All help is appreciated and thanks in advance. Also trying to do the same thing in Jade so if you guys tell me the code for that, it would be great too!
```
<body>
    <li>
        <audio controls>
            <source src="./songs/Remember-The-Name.mp3" type="audio/mp3">
         </audio>
    </li>
<body>
```
Path to html file :

/User/Desktop/music-app/views/test.html

Path to audio file:

/User/Desktop/music-app/songs/Remember-The-Name.mp3
beekeeper over 8 years

Same problem as before, It brings up the player, however the player doesnt work
Phiter over 8 years

His solution should work, considering the file paths.
beekeeper over 8 years

currently I'm not using any javascript code for my front end, is there any way to do it without it?
zer00ne over 8 years

Sure the way your doing it is fine, just remember that the type=audio/mpeg for mp3. and for src, try ../songs/Remember-The-Name.mp3
zer00ne over 8 years

If that works for you, give Rahul Kumar the accept and give me an upvote ;)
beekeeper over 8 years

I tried earlier, Im too new for that :( another quick question, how do I play .m4a files?
beekeeper over 8 years

Yea I had a name error when I tried his plan the first time, it does work. I was just being dumb :(
zer00ne over 8 years

No worries, just do exactly what your'e doing now but use type="audio/mp4" Just thinking you could load both mp3 and m4a just use separate <source> elements. It makes sense if they are the same song with different file extensions. That's more fore browser compatibility, but I believe mp3 is pretty much universal.
executable over 3 years

This should be a comment
Ulysse BN over 2 years

This example doesn't make any sound on my chrome (94.0.4606.81 (Official Build) (x86_64), macos 11.6)...