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>

任何帮助都将非常感激。谢谢！

- user2636480

---

这在我的Chrome浏览器上有效：jsFiddle。您可以通过查看开发者工具中的网络部分来检查是否加载了mp3文件。 - Dylan Holmes

http://www.rossfraser.co/audio/site-jingle.mp3 是一个空文件。长度为0:00。 - Travis J

这个问题似乎不适合讨论，因为它涉及到缺少一个文件。 - Travis J

@DylanHolmes - 这里发生了一些有趣的事情。试试这个。打开网站www.rossfraser.co，然后尝试听链接。对我来说，链接无法播放。然后关闭网站。当网站关闭时，mp3将开始播放。 - Travis J

嗯，奇怪...文件肯定在那里。它在Chrome中对我有效一次，但当我返回时，它停止了... @DylanHolmes，还有其他想法吗？ - user2636480

Answer 1

我想我有解决方案。带有192kbps的MP3无法正常工作。 带有128kbps的MP3可以很好地工作!!!

- hectormr85

Answer 2

首先检查：是否存在JavaScript冲突。

在我的情况下，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>

- Astro

Answer 3

我认为谷歌浏览器对下划线存在偏见。删除音乐文件中的下划线完全解决了这个问题。

首先，我在网页上想添加2个不同的HTML5音频播放器，分别用于播放两首歌曲。其中一首歌曲文件有下划线，而另一首没有。

我的第一步是采纳hectorme85的建议，将我的.mp3和.ogg比特率改为128kpbs。问题仍然存在，只有带下划线的歌曲出现了问题。当时我还没有意识到没有下划线的歌曲已经解决了问题。然后我的第二步是交换.ogg和.mp3的顺序，让.ogg先播放。但依然是带下划线的歌曲无法播放，没有下划线的歌曲能正常播放。

最后，我仔细查看了两首歌曲在标记上的区别。那时我想到了一个点子，“我可能需要删除歌曲文件中的下划线”。于是我这样做了，突然间，我的音频在谷歌浏览器中能正常播放了。

- Nova Pixels Designs

Answer 4

我在Ubuntu 12.04上遇到了同样的问题（无法在mac/win上尝试）

我通过切换到ogg来解决这个问题，在firefox和chrome上都完美运行。

我尝试了使用不同比特率、单声道-立体声、质量选项播放mp3，但没有成功。

我认为问题是由编解码器引起的。对我来说，这也解释了为什么firefox一直坚持不使用mp3。

- hevi