为什么在audio标签中使用源标签可以防止loadeddata事件被触发？

Question

为了更好地访问,我们需要第二组备用播放/暂停控制,并且(在用户Kento Nishi的帮助下)我们成功地从DEMO A(仅有1个音频播放控制)移动到DEMO B(具有重复的音频播放控制).

问题1在DEMO B中打破了持续时间(最右边的数字).

问题2每个网页都有自己的文件夹.有些页面已准备好语音音频文件,*.mp3但有些页面没有.如果在页面自己的文件中没有speak.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,但我怀疑这些音频持续时间中断的原因.

BEAUTY关于演示A和B的好处是音频文件不会在用户点击播放之前(并且仅在其之后)加载.这样就不会浪费任何带宽,直到用户点击播放!此功能非常重要,应保持完整,以及布局方面的重复控件集,并且html部分应保持尽可能完整.

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

Answer 1

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

https://jsfiddle.net/3aof2jnL/

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

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

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

为了理解它，这个小提琴中的所有代码都已被注释，因此有关我如何做到这一点的更多详细信息，请阅读小提琴中的注释。

至于问题2，你最好使用服务器端代码EG使用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/

原因是我们在事件触发后绑定事件，因为它们位于函数playpause内部

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