html5 audio not playing in chrome

Question

I have a very simple website with an html5 video and a html5 audio that is triggered on and off with two simple buttons. the audio all works gloriously fine in Safari, but will not work in Chrome.

my website is www.rossfraser.co (that is not .com)

my code for the audio is this:

<div align="center">
<audio>
  <source src="audio/site-jingle.mp3" type="audio/mpeg">
</audio>
</div>

<audio id="player" src="audio/site-jingle.mp3" type="audio/mpeg" loop></audio>
<div style="text-align:center">
    <button onclick="document.getElementById('player').play()">JINGLE</button>
    <button onclick="document.getElementById('player').pause()">NO JINGLE</button>
</div>

Any help would be GREATLY appreciated. Thanks!

Solution 1

I think I have the solution. MP3 with 192kbps doesn't work.

MP3 with 128 works fine!!!

Solution 2

Firstly see: If there are no java script conflicts. In my case jquery.mini.js was conflicting.

The best cross-browser support worked for me was buzz.js:

<script src="buzz.js"></script>
<script>
var sound;
$(function() {
sound = new buzz.sound( "media/yourfilename", {
    formats: ['ogg', 'mp3']
}).setVolume(100).play();

$('#pause').click(function() {
    sound.pause();
});
$('#play').click(function() {
    sound.play();
    });
});    
</script>

For buttons use this:

<button id="pause">Pause</button>
<button id="play">Play</button>

or

<audio controls id="a1" preload="auto" autoplay  src="media/page1"></audio>

Solution 3

I think Google Chrome has something against underscores. Taking out the underscores in my song file solved the problem in it's entirety

First off, I have 2 separate HTML5 audio players that I wanted on my webpage for 2 songs. One song file had underscores, and one song file didn't.

My first step was to take hectorme85's advice, and change my .mp3 and .ogg bitrates to 128kpbs. Had the same problem, except only for the song with the underscores. At this time, the no underscore solution didn't dawn on me yet. Then my second step was to switch the order of the .ogg and .mp3, making .ogg come first. Still, the underscored song didn't work- and the song without the underscores worked.

Lastly, I looked at the differences with both songs very carefully in my markup. That's when it hit me. "I may need to delete the underscores for the song file." So I did, and BAM.. My audio works for me in Chrome.

Comments

[Dylan Holmes]

This works for me in chrome: jsFiddle. You can check to see if the mp3 file loads by looking in the network part up the developer tools

[Travis J]

rossfraser.co/audio/site-jingle.mp3 is an empty file. 0:00 long.

[Travis J]

This question appears to be off-topic because it appears to be about a missing file.

[Dylan Holmes]

@TravisJ, that links plays for me.

[Travis J]

@DylanHolmes - What is strange is that the link plays for me too. But when I navigate to it from the RLF page (OP's page) in the developer tools it has a 0:00 length and does not play.

[Travis J]

@DylanHolmes - There is something interesting occurring here. Try this. Open the site www.rossfraser.co, and then try to listen to link. For me, the link won't play. Then, close the site. The mp3 will start playing when the site is closed.

[user2636480]

hmm strange...the file is definitely there. it will work once for me in chrome but when i navigate back to it, it stops.... any other ideas @DylanHolmes ?

[Dylan Holmes]

Maybe clear your cache? Or test another mp3

[Dylan Holmes]

The document might not be done loading when you try to play it...

[hevi]

on chrome&firefox @ ubuntu 12.04 doesn't work