HTML5 音频标签在 Chrome 中显示错误的 MP3 时长

本文介绍了HTML5 音频标签在 Chrome 中显示错误的 MP3 时长的处理方法,对大家解决问题具有一定的参考价值

问题描述

当我尝试通过 HTML5 播放器播放我的一些 MP3 时,播放器似乎返回两个不同的持续时间.当我使用 jQuery 查询持续时间时,我得到了当前的持续时间,但在默认的 Chrome 播放器中,这首歌尝试播放的时间比实际播放的时间长得多.这在 Safari(MacOSX 上的 7.0.1)中不是问题.是什么导致某些 MP3 出现此问题?如何让 Chrome(第 31 版)使用正确的时间?

When I try to play some of my MP3s through the HTML5 player, the player seems to return two different duration times. When I query the duration with jQuery, I get the current duration, but in the default Chrome player, the song tries to play for significantly longer than the song actually is. This is not an issue in Safari (7.0.1 on MacOSX). What is causing this issue with certain MP3s and how can I get Chrome (v. 31) to use the correct time?

代码如下:

<audio controls="" autoplay="" name="media"><source src="http://musicalfamilytree.com/_private/c/cowboys_the/clown-car_2.mp3" type="audio/mpeg"></audio>
<input type="button" onclick='alert($("audio")[0].duration);' value="check duration" />

这是音频文件的 JSFiddle:http://jsfiddle.net/spKqh/5/

Here is a JSFiddle of the audio file: http://jsfiddle.net/spKqh/5/

推荐答案

这一切都归结为具体的 MP3 文件.估计 MP3 文件的长度听起来像是一项简单的任务,但没有一种正确的方法可以做到.有不同的标签标准在起作用,有时这些标签存储长度,这可能准确也可能不准确.另一种方法是确定 MP3 文件是恒定比特率文件还是可变比特率文件,然后处理一些数字以确定长度.

This all boils down to the specific MP3 file. Estimating the length of an MP3 file sounds like it would be a straightforward task, but there is no 1 correct way to do it. There are different tagging standards at play and sometimes such tags store a length, which may or may not be accurate. Another approach is to determine if the MP3 file is a constant vs. variable bit rate file and then crunch some numbers to determine the length.

我的猜测是 Safari 使用前者(用标签估计)来找到 126 秒的真实长度,而 Chrome 使用后者(通过比特率和文件大小猜测)来猜测 227 秒的长度.进一步解释:

My guess is that Safari does the former (estimate with tags) to find the true length of 126 seconds while Chrome does the latter (guess by bit rate and file size) to guess a length of 227 seconds. To explain further:

我下载了有问题的 MP3 进行分析 (clown-car_2.mp3).它是 9096504 字节长.根据播放实用程序,它以每秒 320 千比特的恒定比特率进行编码.假设千位是 1000 位:

I downloaded the MP3 in question for analysis (clown-car_2.mp3). It is 9096504 bytes long. According to playback utilities, it is encoded at a constant bit rate of 320 kilobits per second. Assuming a kilobit is 1000 bits:

320000 bits per second / 8 bits per byte = 40000 bytes per second
9096504 bytes / 40000 bytes per second = ~227 seconds

这是怎么回事?MP3 文件以额外元数据的形式携带着大量行李.FFmpeg 将其识别为具有动态 JPEG 视频轨道(可能是静态封面图片).这很可能会忽略长度计算.

What's going on here? The MP3 file is carrying a ton of baggage in the form of extra metadata. FFmpeg identifies it as having a motion JPEG video track (probably a static cover art image). This is likely throwing off the length calculation.

我在清理元数据时使用 FFmpeg 重新编码 MP3:

I used FFmpeg to re-code the MP3 while scrubbing the metadata:

ffmpeg -i clown-car_2.mp3 -vn -acodec copy clown-car_2.scrubbed.mp3

此命令忽略视频轨道 (-vn) 并无损地转码编码的音频(不会导致音频质量损失).FFmpeg 将此文件识别为 126 秒(而之前声称为 227 秒).请注意,这个新文件是 5043953 字节:

This command ignores the video track (-vn) and losslessly transcodes the encoded audio (incurs no audio quality loss). FFmpeg identifies this file as being 126 seconds (while claiming 227 seconds before). Note that this new file is 5043953 bytes:

5043953 bytes / 40000 bytes per second = ~126 seconds

因此,您可能希望通过丢失庞大的图像元数据来收紧这些 MP3 文件(并且可能考虑低于 320 kbits/sec 的比特率,这是 MP3 支持的最大值,并且在 Internet 流媒体中并不常见).

So, you might want to work on tightening up those MP3 files by losing the bulky image metadata (and perhaps consider a lower bitrate than 320 kbits/sec which is the max that MP3 supports and not that common for internet streaming).

这篇关于HTML5 音频标签在 Chrome 中显示错误的 MP3 时长的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,WP2

admin_action_{$_REQUEST[‘action’]}

do_action( "admin_action_{$_REQUEST[‘action’]}" )动作钩子::在发送“Action”请求变量时激发。Action Hook: Fires when an ‘action’ request variable is sent.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$_REQUEST['action']引用从GET或POST请求派生的操作。源码(Source)更新版本源码位置使用被使用2.6.0 wp-admin/admin.php:...

日期:2020-09-02 17:44:16 浏览:1167

admin_footer-{$GLOBALS[‘hook_suffix’]}

do_action( "admin_footer-{$GLOBALS[‘hook_suffix’]}", string $hook_suffix )操作挂钩:在默认页脚脚本之后打印脚本或数据。Action Hook: Print scripts or data after the default footer scripts.目录锚点:#说明#参数#源码说明(Description)钩子名的动态部分,$GLOBALS['hook_suffix']引用当前页的全局钩子后缀。参数(Parameters)参数类...

日期:2020-09-02 17:44:20 浏览:1069

customize_save_{$this->id_data[‘base’]}

do_action( "customize_save_{$this-&gt;id_data[‘base’]}", WP_Customize_Setting $this )动作钩子::在调用WP_Customize_Setting::save()方法时激发。Action Hook: Fires when the WP_Customize_Setting::save() method is called.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_data...

日期:2020-08-15 15:47:24 浏览:806

customize_value_{$this->id_data[‘base’]}

apply_filters( "customize_value_{$this-&gt;id_data[‘base’]}", mixed $default )过滤器::过滤未作为主题模式或选项处理的自定义设置值。Filter Hook: Filter a Customize setting value not handled as a theme_mod or option.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_date['base'],指的是设置...

日期:2020-08-15 15:47:24 浏览:898

get_comment_author_url

过滤钩子:过滤评论作者的URL。Filter Hook: Filters the comment author’s URL.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/comment-template.php:32610...

日期:2020-08-10 23:06:14 浏览:930

network_admin_edit_{$_GET[‘action’]}

do_action( "network_admin_edit_{$_GET[‘action’]}" )操作挂钩:启动请求的处理程序操作。Action Hook: Fires the requested handler action.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$u GET['action']引用请求的操作的名称。源码(Source)更新版本源码位置使用被使用3.1.0 wp-admin/network/edit.php:3600...

日期:2020-08-02 09:56:09 浏览:876

network_sites_updated_message_{$_GET[‘updated’]}

apply_filters( "network_sites_updated_message_{$_GET[‘updated’]}", string $msg )筛选器挂钩:在网络管理中筛选特定的非默认站点更新消息。Filter Hook: Filters a specific, non-default site-updated message in the Network admin.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分$_GET['updated']引用了非默认的...

日期:2020-08-02 09:56:03 浏览:863

pre_wp_is_site_initialized

过滤器::过滤在访问数据库之前是否初始化站点的检查。Filter Hook: Filters the check for whether a site is initialized before the database is accessed.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/ms-site.php:93910...

日期:2020-07-29 10:15:38 浏览:833

WordPress 的SEO 教学:如何在网站中加入关键字(Meta Keywords)与Meta 描述(Meta Description)?

你想在WordPress 中添加关键字和meta 描述吗?关键字和meta 描述使你能够提高网站的SEO。在本文中,我们将向你展示如何在WordPress 中正确添加关键字和meta 描述。为什么要在WordPress 中添加关键字和Meta 描述?关键字和说明让搜寻引擎更了解您的帖子和页面的内容。关键词是人们寻找您发布的内容时,可能会搜索的重要词语或片语。而Meta Description则是对你的页面和文章的简要描述。如果你想要了解更多关于中继标签的资讯,可以参考Google的说明。Meta 关键字和描...

日期:2020-10-03 21:18:25 浏览:1719

谷歌的SEO是什么

SEO (Search Engine Optimization)中文是搜寻引擎最佳化,意思近于「关键字自然排序」、「网站排名优化」。简言之,SEO是以搜索引擎(如Google、Bing)为曝光媒体的行销手法。例如搜寻「wordpress教学」,会看到本站的「WordPress教学:12个课程…」排行Google第一:关键字:wordpress教学、wordpress课程…若搜寻「网站架设」,则会看到另一个网页排名第1:关键字:网站架设、架站…以上两个网页,每月从搜寻引擎导入自然流量,达2万4千:每月「有机搜...

日期:2020-10-30 17:23:57 浏览:1308