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 :
Try copy+pasting the following block:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="audio/horse.mp3" type="audio/mpeg">
</audio>
</body>
</html>
I switched your quotes to be only " instead of “ and ”.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With