为什么在音频标签内使用源标签会阻止 loadeddata 事件触发？

Question

为了更好的可访问性，我们需要第二组替代的 play/pause 控件和 （在用户 Kento Nishi 的帮助下） 我们成功地从 DEMO A (with only 1 audio playback control) to DEMO B （带有重复的音频播放控件）。

问题 1 DEMO B 中的持续时间（最右边的数字）被破坏了。

问题2 每个网页都有自己的文件夹。有些页面有现成的语音文件，*.mp3 但有些页面没有。如果页面自己的文件夹中没有 spoken.mp3（所有页面的文件名相同），是否可以隐藏所有音频控件 html？所以总结一下：如果服务器上当前网页文件夹 <source src="*.mp3" type="audio/mpeg"> 中存在 *.mp3 文件，则显示音频控件的 html。否则通过 CSS.

隐藏音频 html 控件

旧版DEMO A，只有一套控件：

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

新的DEMO B，多组控件：

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

此处 JS Lint 显示错误：意外 for 和意外 var，但我怀疑这些是否是音频持续时间中断的原因。

BEAUTY 两个演示 A 和 B 的优点在于，音频文件在用户单击播放之前（且仅在用户单击播放之后）才加载。这样就不会浪费 any 带宽，直到用户点击播放！此功能很重要，应保持完整，并且重复的控件布局集和 html 部分应尽可能保持完整。

BOUNTY:200 除了 duration/audio 长度被破坏并且当音频文件不存在时显示控件外，新的演示工作正常。赏金是对工作 jsfiddle 演示中任一问题（或两者）的解决方案的一点赞赏。感谢您提供的所有帮助。

Answer 1

如果我没理解错的话，你使用 JSLint 来检查你的代码。之所以说 for 是意外的，是因为 JSLint 的配置默认不接受 for 循环。在 JSLint 网站上，您可以查看页面底部以进行更改：

基本上，有些人认为每个循环都应该以函数式编程风格完成（例如 .forEach）。要知道为什么，我建议你上网看看，多方意见，但你可以有一个 here.

至于您的 "bonus question"，我可以得出结论，问题出在使用 source 标签指定您的音频源。尝试使用 audio 标签的 src 属性，它应该可以工作。我找不到原因，所以我们必须等待其他人回答。

Answer 2

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

https://jsfiddle.net/3aof2jnL/

这个 fiddle 我已经根据您的要求从头开始重建。

这仅使用一次功能作为事件绑定，一旦系统设置完毕，便会解除绑定。

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

为了理解它，fiddle 中的所有代码都已被注释，所以有关我如何做的更多详细信息，请阅读 fiddle.

中的注释

至于问题 2，你最好使用服务器端代码 E.G 使用 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，有些浏览器不支持支持奥格。然后用我的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/

这是因为您的我们在事件触发后绑定事件，因为它们在 playpause 函数中

此外，您的 play 变量未设置，因此现在设置为循环遍历的集合。

为什么在音频标签内使用源标签会阻止 loadeddata 事件触发？

Why using a source tag inside an audio tag prevents the loadeddata event from firing?

html

javascript

audio

mp3

jslint