为什么在音频标签内使用源标签会阻止loaddatadata事件触发? [英] Why using a source tag inside an audio tag prevents the loadeddata event from firing?

问题描述

为了获得更好的可访问性，我们需要第二套替代的播放/暂停控件和(在Kento Nishi用户的帮助下)，我们成功地从 DEMO B (具有重复的音频播放控件).

For better accessibility we needed a second alternative set of play/pause controls and (with the help of user Kento Nishi) we successfully moved from DEMO A (with only 1 audio playback control) to DEMO B (with duplicated audio playback controls).

问题1 在演示B中的持续时间(最右边的数字)中断了.

PROBLEM1 The time duration (far right number) is broken in DEMO B.

问题2 每个网页都有其自己的文件夹.有些页面已经准备好语音音频文件，*.mp3，但是有些页面没有.如果页面自己的文件记录器中不存在speaked.mp3(所有页面的文件名相同)，是否可以隐藏所有音频控件html?因此，总而言之:如果* .mp3文件存在于当前网页文件夹<source src="*.mp3" type="audio/mpeg">中的服务器上，则显示音频控件的html.否则，通过CSS隐藏音频html控件.

PROBLEM2 Every webpage has its own folder. Some pages have a spoken audio file ready made, *.mp3 but some pages dont. Would it be possible to hide all audio controls html if the spoken.mp3 (same file name for all pages) is absent in the page's own filder? So in summary: if the *.mp3 file exists on the server in the current web page folder <source src="*.mp3" type="audio/mpeg"> then display the html for the audio controls. Otherwise hide the audio html controls via CSS.

旧的DEMO A，只有一组控件:

The old DEMO A, with only 1 set of controls:

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

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

The new DEMO B, with multiple set of controls:

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

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

Here JS Lint shows errors: unexpected for and unexpected var, but I doubt wether these the reason behind the broken audio time duration.

美容关于两个演示A和amp; B是直到(并且只有在)用户单击播放之后才加载音频文件.这样就不会浪费任何带宽，直到用户单击播放！此功能非常重要，应保持不变，以及在布局上重复的控件集和html部件应尽可能保持完整.

BEAUTY The good part about both demos A & B are that the audio file is loaded not until (and only after) a user clicks play. That way not wasting any bandwith untill user clicks play! This functionality is important and should remain intact, as well as the duplicated set of controls layout-wise and the html parts should remain as much as possible intact.

BOUNTY:200 新的演示程序可以正常工作，只是持续时间/音频长度中断，并且当不存在音频文件时，将显示控件.对于在工作中的jsfiddle演示中解决这两个问题(或同时解决这两个问题)的人来说，赏金是一点点赞赏.感谢您提供的所有帮助.

BOUNTY:200 The new demo works except the duration/audio length is broken and when audio file is not existing the controlls are shown. The bounty is a little token of appreciation for a solution to either problems (or both) in a working jsfiddle demo. Thanks for any and all help.

推荐答案

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

This is a new answer based on the changing requirements and due to a bug that I missed causing the audio to auto load on page load.

https://jsfiddle.net/3aof2jnL/

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

This fiddle I have rebuilt from the ground up for your requirements.

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

This uses one time only functions as event binding that are then unbound once the system is set up.

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

it also does not have the <audio> tags in the HTML to prevent preloading before it's needed. and create the audio when the play button is triggered.

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

To understand it all the code in this fiddle has been commented so for more details on how I did it please read the comments in the fiddle.

对于问题2，最好使用服务器端代码E.G使用PHP

As for problem 2 you are better off using server-side code E.G use 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，您将看到

Oh and one last thing before I go you need to get all your audio's and converted them to OGG and have both an OGG Vorbis format and an MP3 format, not all browser support mp3 and the ones that don't do support OGG. then with my javascript, you will see

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

例如，您应该添加一个OGG路径.

you should add an OGG path for example.

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

------旧答案仅解决了原始问题-----

------ old answer fixed the original problem only -----

您在这里工作， https://jsfiddle.net/y61bjk5e/1/

原因是您在事件触发后绑定了​​事件，因为它们在playpause函数中

The reason for this is your we're binding events after they had fired because they were inside the playpause function

还没有设置您的play变量，因此现在将其设置为循环播放的集合.

Also, your play variable was not set so that is now set to a collection that it loops through.

这篇关于为什么在音频标签内使用源标签会阻止loaddatadata事件触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！