html5 audio not playing in chrome

问题

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!

回答1:

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

MP3 with 128 works fine!!!

回答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>

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

回答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.

回答4:

I had the same problem on Ubuntu 12.04 (couldn't try on mac/win)

I sort the problem out by switching to ogg, it works perfect on both firefox and chrome.

I tried to play mp3s with different bitrates, mono-stereo, quality options but no chance :(

in my opinion problem is caused by codec issues. for me it also explains why firefox has been insisting not to use mp3.

来源：https://stackoverflow.com/questions/18906360/html5-audio-not-playing-in-chrome

标签

html5

audio

html5-audio