Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I have simple HTML 5 code that I am trying to load on chrome but the player is greyed out and no controls are working

Tags:

html

audio

mp3

I am using the latest version of Chrome 55+. I put the content below on index.html and the horse.mp3 file is in a subdirectory named audio.

when I open the index.html file in chrome, it shows the player, but it's greyed out and no volume controls are shown either. A similar example in w3schools works fine on chrome. the example at w3schools can be found at the link below :

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

the code in index.html is as follows :

         <!DOCTYPE html>
          <html>
            <body>
              <audio controls>
                <source src=“audio/horse.mp3” type=“audio/mpeg”>
              </audio>  
             </body>
           </html>

Note :

  • The horse.mp3 file plays fine offline. The audio subdirectory exists and horse.mp3 exists within
like image 845
ram Avatar asked Dec 03 '25 16:12

ram


1 Answers

Try copy+pasting the following block:

<!DOCTYPE html>
<html>
<body>
    <audio controls>
        <source src="audio/horse.mp3" type="audio/mpeg">
    </audio>  
    </body>
</html>

Short Explanation

I switched your quotes to be only " instead of and .

Long Explanation

The only thing I can see (and verify) is that you're using some funky quotation marks...

Instead of just using a " (a "standard" quotation mark), you are using a and a (a left double quotation mark and right double quotation mark). Browsers tend to not handle left and right double quotation marks as most people might expect (it's not a bug). Because of that, your audio tag probably has an incorrect src being set. For example, when I use the left and right double quotation marks and then inspect the source of the audio tag, I see the following:

<source src="“audio/horse.mp3â€" type="“audio/mpegâ€/">

Obviously, that's not the path you were looking for.

If you look at the unicode values for them (just copy+paste “”" into the search bar at UnicodeLookup.com), you can easily see the difference between the three types of quotes.

I've set up a test demonstrating this and you can view it here. The element on the left has its source set with standard quotes, and the one on the right has its source set with the "special" quotes.

like image 199
JoshuaTheMiller Avatar answered Dec 06 '25 07:12

JoshuaTheMiller