代码之家 › 专栏 › 技术社区 › Sam

为什么在音频标记中使用源标记会阻止loadeddata事件触发?

jslint mp3 audio html5 javascript

6

Sam · 技术社区 · 7 年前

为了获得更好的可访问性,我们需要另一组可选的播放/暂停控件和 (在用户Kento Nishi的帮助下) 我们成功地从 DEMO A (只有一个音频播放控制)至 DEMO B (使用复制的音频播放控件)。

问题1 演示B中的持续时间(最右边的数字)被打断。

问题2 每个网页都有自己的文件夹。有些页面已经准备好了语音文件, *.mp3 但有些页面没有。如果speaked.mp3(所有页面的文件名相同)在页面自己的filder中不存在,是否可以隐藏所有音频控件html?总之,如果当前网页文件夹中的服务器上存在*.mp3文件 <source src="*.mp3" type="audio/mpeg"> 然后显示音频控件的HTML。否则通过css隐藏音频html控件。

旧的demo a,只有一组控件:

var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];

新的演示B,带有多组控件:

document.getElementsByTagName("playpause")[0].addEventListener("click", playpause);
document.getElementsByTagName("playpause")[1].addEventListener("click", playpause);

这里js lint显示错误:意外 for 出乎意料的 var ,但我怀疑这些是否是音频中断持续时间背后的原因。

美女这两个演示A和B的优点在于,音频文件是在用户单击“播放”后才加载的。这样才不会浪费任何直到用户点击播放!这个功能很重要,应该保持原样,以及重复的控件集布局和html部分应该尽可能保持原样。

赏金:200 新的演示作品,除了持续时间/音频长度被打破,当音频文件不存在的控制显示。赏金是对工作中的jsfiddle演示中解决问题(或两者兼有)的一个小小的感谢。谢谢你的帮助。

2 回复 | 直到 6 年前

1

2

Martin Barker 6 年前

这是一个新的答案,基于不断变化的需求,并由于一个错误,我错过了导致音频自动加载页面加载。

https://jsfiddle.net/3aof2jnL/

这把小提琴是我根据你的要求从头开始重建的。

这将只使用一次性函数作为事件绑定,然后在系统设置后解除绑定。

它也没有 <audio> HTML中的标记,以防止在需要之前进行预加载。并在触发播放按钮时创建音频。

为了理解它,这个小提琴中的所有代码都被注释了,所以更多关于我是如何做到的细节,请阅读小提琴中的注释。

对于问题2,最好使用服务器端代码,例如使用php

<?php
$page_name = $_SERVER['REQUEST_URI'];
str_replace($page_name, ".php", ".mp3");
if(file_exists("audio/{$pageName}")){
 // page has an mp3 audio
}
?>

哦,还有最后一件事,在我走之前,你需要得到你所有的音频,并把它们转换成ogg,既有ogg vorbis格式和mp3格式,不是所有的浏览器都支持mp3和那些不支持ogg的。然后使用我的javascript,您将看到

audioSources["audio/mpeg"] = "http://www.hochmuth.com/mp3/Bloch_Prayer.mp3";

例如,您应该添加一个ogg路径。

audioSources["audio/ogg"] = "http://www.hochmuth.com/ogg/Bloch_Prayer.ogg";

——旧答案只修正了原来的问题———

给你工作, https://jsfiddle.net/y61bjk5e/1/

原因是你的we在事件被触发后绑定事件,因为它们在 playpause 功能

另外,没有设置play变量,因此现在将其设置为循环通过的集合。

2

Jeahel 7 年前

如果我理解正确,可以使用jslint对代码进行lint。为什么它说 for 意外是因为jslint的配置默认情况下不接受for循环。在jslint网站上,您可以查看页面底部以更改:

基本上,有些人认为每个循环都应该以函数式编程风格完成(使用 .forEach 例如)。为了知道原因,我建议你上网看一看,以获得多种意见,但你可以有一个 here 是的。

至于你的“奖金问题”,我可以断定问题出在使用 source 标记以指定音频源。尝试使用 src 的属性 audio 标签和它应该工作。我找不到原因,所以我们得等别人来回答。