Question

为了获得更好的可访问性，我们需要第二套替代的播放/暂停控件，并且（在Kento Nishi用户的帮助下）我们成功地从DEMO A迁移了（只有一个音频播放控件）到DEMO B（具有重复的音频播放控件）。

问题1 在演示B中的持续时间（最右边的数字）中断了。

问题2 每个网页都有其自己的文件夹。有些页面已经准备好语音音频文件，*.mp3，但是有些页面没有。如果页面自己的文件记录器中不存在speaked.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

如果我理解正确，则可以使用JSLint整理代码。之所以说for是意外的，是因为JSLint的配置默认情况下不接受for循环。在JSLint网站上，您可以查看页面底部以进行更改：

基本上，有些人认为每个循环都应该以函数式编程风格完成（例如，以.forEach进行）。要知道为什么，我建议您在线查看以获取多种意见，但是可以有一个here。

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

Answer 2

这是一个新的答案，它是根据不断变化的需求以及我错过的一个导致音频在页面加载时自动加载的错误所致。

https://jsfiddle.net/3aof2jnL/

我已根据您的要求重新构建了这个小提琴。

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

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

要理解该小提琴中的所有代码，请先对其进行注释，以获取有关我如何执行此操作的更多详细信息，请阅读小提琴中的注释。

对于问题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和不支持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变量，因此现在将其设置为循环播放的集合。

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

2 个答案: