html5音频无法在chrome中播放

Question

我有一个非常简单的网站与一个html5视频和html5音频，是由两个简单的按钮触发和关闭。音频在Safari中工作得非常好，但在Chrome中就不能工作了。

我的网站是www.rossfraser.co (不是.com)

我的音频代码是这样的：

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

任何帮助都将不胜感激。谢谢!

Answer 1

我想我有办法了。192kbps的MP3无法工作。

128的MP3工作正常！

Answer 2

我认为Google Chrome有一些下划线的地方。去掉我歌曲文件中的下划线解决了整个中的问题

首先，我有两个独立的HTML5音频播放器，我想在我的网页上的两首歌曲。一个歌曲文件有下划线，另一个没有下划线。

我的第一步是采纳了hertorme85的建议，将我的.mp3和.ogg比特率改为128kpbs。也有同样的问题，除了那首下划线为的歌曲。此时，我还没有意识到无下划线的解决方案。然后我的第二步是交换.ogg和.mp3的顺序，使.ogg排在第一位。尽管如此，带下划线的歌曲仍然不起作用--没有下划线的歌曲起作用了。

最后，我在我的标记中非常仔细地查看了这两首歌的区别。那时候我突然想到了。“我可能需要删除歌曲文件的下划线。”所以我照做了，然后BAM..我的音频在Chrome中可以正常工作。

Answer 3

首先看看:如果没有java脚本冲突。在我的例子中，jquery.mini.js是矛盾的。

对我来说最好的跨浏览器支持是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>

对于按钮，请使用以下命令：

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

或

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