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

Question

为了更好的可访问性，我们需要第二组替代的播放/暂停控件，并且(在用户 Kento Nishi 的帮助下)我们成功地从 DEMO A 移动了(只有 1 个音频播放控件)到 DEMO B (带有重复的音频播放控件)。

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

问题 2 每个网页都有自己的文件夹。一些页面有现成的语音文件，*.mp3但有些页面没有。如果页面自己的文件夹中没有 spoken.mp3(所有页面的文件名相同)，是否可以隐藏所有音频控件 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];

新的 DEMO B，具有多组控件:

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

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

美丽 两个演示 A 和 B 的优点在于，音频文件直到(且仅在)用户单击播放后才加载。这样在用户点击播放之前不会浪费任何带宽!此功能很重要，应保持完整，重复的控件布局设置和 html 部分应尽可能保持完整。

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

Answer 1

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

https://jsfiddle.net/3aof2jnL/

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

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

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

要理解它，此 fiddle 中的所有代码都已进行注释，因此有关我如何做的更多详细信息，请阅读 fiddle 中的注释。

至于问题 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/

这是因为您的我们在事件触发后绑定(bind)事件，因为它们在 playpause 中功能

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