html5音频无法在chrome中播放

Posted 2023-02-25

【中文标题】html5音频无法在chrome中播放

【英文标题】：html5 audio not playing in chrome

【发布时间】：2013-09-19 23:05:28

【问题描述】：

我有一个非常简单的网站，其中包含一个 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>

任何帮助将不胜感激。谢谢！

【问题讨论】：

这在 chrome 中适用于我：jsFiddle。您可以通过在开发人员工具中查看网络部分来检查 mp3 文件是否加载

rossfraser.co/audio/site-jingle.mp3 是一个空文件。 0:00 长。

这个问题似乎是题外话，因为它似乎是关于一个丢失的文件。

@TravisJ，该链接适合我。

@DylanHolmes - 奇怪的是链接也为我播放。但是当我从开发人员工具中的 RLF 页面（OP 页面）导航到它时，它的长度为 0:00 并且无法播放。

【参考方案1】：

我想我有解决办法。 192kbps 的 MP3 不起作用。

128 的 MP3 可以正常工作！！！

【参考方案2】：

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

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

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

最后，我在标记中非常仔细地查看了两首歌曲的差异。就在那时它击中了我。 “我可能需要删除歌曲文件的下划线。”所以我做到了，然后 BAM.. 我的音频在 Chrome 中适合我。

【参考方案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>

【参考方案4】：

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

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

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

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