如何最小化html5音频标签的加载时间？

问题描述：

我想建立一个简单的音乐播放器使用html音频标签和一些JavaScript。当我编码时，它的工作正常，而文件存储在Safari（在Imac）和Firefox本地。然后我将它上传到我的网页以测试它的实况，并且有这些问题：

（1）Imac上的Safari需要大约一分钟的时间来加载文件并开始播放（2）iphone上的Safari没有自动播放文件，尽管我在代码中使用了自动播放属性....参见下面的代码）（3）Firefox只是不玩它！（虽然当文件是本地播放时很好）

似乎文件太大....我的问题是：（1）有没有办法让加载时间更短？和（2）有关为什么自动播放功能无法在iPhone Safari上工作以及如何避开它的任何想法？

这里是我使用的歌曲代码：

<audio autoplay="autoplay" controls="controls"> 
<source src="../audio/3.ogv" /> 
<source src="../audio/3.mp3" /> 
Your browser does not support the audio element. 
</audio>

感谢您的帮助

迭戈

答

刚抬起头......因为HTML 5是不是XML语法基础，你不分配这样的属性。

使用<audio autoplay controls>作为开始标签。

迈克尔......谢谢，这是短了很多。整齐。 –

答

从我可以告诉他们不希望自动播放Iphone/iPad上的HTML标签。

这是一些可能帮助你的代码的链接:)。

Iphone Autoplay.

它说，你可以避开它与一些JavaScript。

希望帮助:)。

谢谢罗斯。我会尝试该代码，看看我是否可以使它适用于iPhone ...干杯 –

不用担心:)。我认为它适用于新的视频和音频标签。 – RossDoughty

听起来很愚蠢，但你不能只给音频标签一个ID？然后在页面加载中将其设置为.play（）;？ :) –

答

我相信你不能在iPhone上自动播放。我认为这是为了防止过多的意外数据使用而施加的限制。有一些解决方法可以创建虚假点击，但它们似乎已被修补。

Firefox通过HTML5不支持MP3。 ogv文件是Ogg视频，而不是音频（ogg），这可能是它不在音频标签中播放的原因。

至于加载时间，最好的办法是尽可能压缩文件。这会减少下载时间。

感谢您的文件扩展名正面。我会尝试使用ogg ...仍困惑我为什么它与本地文件，但不是通过网络！？您知道压缩mp3和/或ogg文件的任何工具？ –

@Diego Sanabria - Ogg文件已经被压缩。如果您尝试进一步压缩，质量可能会降低。如果你有原始的音频文件，你可以利用各种压缩设置和采样率来减小文件大小。像Audacity这样的工具可能会有帮助（http://audacity.sourceforge.net/）。不知道为什么FF在本地播放。你是否在本地使用与服务器上相同的文件？ – keyboardP

我想我找到了压缩mp3的方法（http://tinyurl.com/66lf2gf）。我会尝试从320 kbps的比特率到160，并看看它是否加载速度更快。我们会看到ogg文件在转换后有多大。我在本地和现场使用完全相同的文件......它很奇怪:-)非常感谢您的帮助 –

如何最小化html5音频标签的加载时间？

相关推荐