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

首先看：如果没有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>

Answer 3

我认为谷歌浏览器有一些反对下划线的东西。取出我的歌曲文件中的下划线解决了整个问题

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

我的第一步是采取hectorme85的建议，并将我的.mp3和.ogg比特率更改为128kpbs。有同样的问题，除了只有 下划线 的歌曲。在这个时候，没有下划线的解决方案还没有对我产生影响。然后我的第二步是切换.ogg和.mp3的顺序，让.ogg先来。尽管如此，强调的歌曲并没有起作用 - 没有下划线的歌曲也奏效了。

最后，我在标记中仔细查看了两首歌曲的差异。当它袭击我的时候。＆＃34;我可能需要删除歌曲文件的下划线。＆＃34;所以我做了，BAM ..我的音频在Chrome中适用于我。

Answer 4

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

我通过切换到ogg排除问题，它在firefox和chrome上都很完美。

我尝试播放不同比特率，单声道立体声，质量选项的mp3，但没有机会:(

在我看来问题是由编解码器问题引起的。对我而言，它也解释了为什么firefox一直坚持不使用mp3。

html5音频没有在chrome中播放

4 个答案: