如何通过Angularjs在HTML5音频元素中使用DOM事件onloadeddata？
在AngularJS中，你可以使用指令（Directive）来处理HTML5音频元素的DOM事件，如onloadeddata。以下是一个示例，展示了如何在AngularJS应用中使用指令来处理onloadeddata事件。
首先，创建一个AngularJS指令来处理音频元素的onloadeddata事件：
angular.module('myApp', [])
.directive('audioLoadedData', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('loadeddata', function() {
// 这里可以执行你需要的操作
console.log('Audio data loaded');
// 你可以调用一个作用域中的函数
if (scope.onLoadedData) {
scope.$apply(function() {
scope.onLoadedData();
});
}
});
}
};
});然后，在你的HTML中使用这个指令：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Audio Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AudioController">
<audio controls audio-loaded-data>
<source src="path/to/your/audio/file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>在你的控制器中，你可以定义一个函数来处理onloadeddata事件：
angular.module('myApp')
.controller('AudioController', ['$scope', function($scope) {
$scope.onLoadedData = function() {
console.log('Audio data loaded in controller');
// 这里可以执行你需要的操作
};
}]);在这个示例中，我们创建了一个名为audioLoadedData的指令，并在音频元素上使用了这个指令。指令的link函数中，我们监听了loadeddata事件，并在事件触发时执行了一些操作。我们还通过scope.$apply确保了AngularJS的作用域更新。
通过这种方式，你可以在AngularJS应用中处理HTML5音频元素的onloadeddata事件。
相关·内容
我在我的页面上有这样的html5音频
<audio id="audioplayer" playsinline controls muted loop autoplay hidden>
<source src="audio/muzyka_meed_loop.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
在这里，我向音频src添加一个随机数，以防
浏览 77提问于2019-08-01得票数 0
回答已采纳
我正在使用howler.js播放音频，并将实例声明为 sound = new Howl({
src: ['../assets/test.mp3'],
html5: true,
onpause: () => {
this.playButton = true;
} }); 一切正常，但是当播放音频时，chrome android会显示播放歌曲的通知，而当我们通过通知暂停音频时，howler.js不会检测到。 请让我知道如何在我们的代码中检测它。
浏览 41提问于2020-07-24得票数 1
1回答
我在试着预装视频。其思想是在加载高质量视频的同时，加载低质量视频并显示它。
在开发模式下，onloadeddata根本不工作。在生产模式下，页面刷新后，onloadeddata有时工作，有时不工作。
视频存储在“资产”文件夹中。
我做错了什么？
<script>
import { onMount } from 'svelte'
export let
hdSrcArr = [],
nonHdSrcArr = []
let
refHd = null,
refSmall = null,
showLowQualityV
浏览 17提问于2022-10-11得票数 0
我正在使用React/Next.js创建一个音频播放器，但我不知道如何获得音频文件的持续时间。据我所知，我需要使用useRef钩子来访问HTML元素以及有关该文件的所有信息。根据我看到的其他例子，我应该可以这样做：
const EXAMPLE_TRACK = {
title: "Track Title",
src: "http://goldfirestudios.com/proj/howlerjs/sound.ogg"
}
const Track = ({track = EXAMPLE_TRACK}) => {
const [duration
浏览 6提问于2022-06-09得票数 0
回答已采纳
2回答
我试图在我的游戏中有一个加载进度条，我有一个函数分配给我的音频的onloadeddata属性，但它在Chrome中不触发。它可以在其他浏览器中工作。我还尝试了许多其他事件，如oncanplay、oncanplaythrough、onloadedmetadata等，但它们都不会触发。
我认为这可能与缓存有关。我试着环顾四周，2-3年前有一些关于这方面的报道，但最近没有。
是否有其他方法可以检测音频是否已加载，或使这些事件工作？
编辑:这里有一个简单的例子：可以在歌剧和火狐中运行，但不能在Chrome中运行。如果完成加载，当声音响起时，它应该发出警告。
浏览 0提问于2012-05-29得票数 4
回答已采纳
3回答
我如何编写一个函数来停止在DOM中播放html5音频的所有实例？
html5音频
<audio class="AudioPlayerV1" preload="none" width="292">
<source src="test.mp3" type="audio/mpeg" />
</audio>
js
AudioPlayerV1('*').each(function() {
this.setStop();
});
浏览 0提问于2012-02-15得票数 3
回答已采纳
我在做一个音频播放器。它有暂停，倒带和时间寻找的特点。如何以及由谁来处理音频元素？
我可以把它放在商店的一边。我不能直接把它放在州里，因为它可能会被克隆。然后，当我在减速器时，我可以和它互动。问题是，如果我需要同步时间滑块与音频，我将需要不断轮询商店使用一个动作。从语义上讲，这也没有什么意义。
我可以创建一个自定义的React组件，Audio，它可以完成我说的所有事情。问题还没解决。如何刷新滑块？我可以投票，但我真的不喜欢这个解决方案。此外，除非我创建一个包含音频和滑块的组件，否则我仍然需要使用redux将两者连接起来。
那么，处理带有进度显示的音频的最有效的方法是什么？
浏览 5提问于2017-03-09得票数 17
回答已采纳
2回答
我已经在web应用程序中添加了一个音乐音频播放器。完成音频后，我需要调用一个函数。但问题是没有指定音频长度。 例如，10秒音频结束，然后调用函数，7秒音频，然后调用函数。 这意味着一旦音频完成，然后调用函数到事件发生。不应指定音频长度。 这是我的音频播放器代码 <audio controls="controls" controlsList="nodownload" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 4000)&#
浏览 19提问于2020-06-29得票数 0
回答已采纳
2回答
删除html5媒体DOM元素(视频或音频)是否也释放由该元素表示的媒体使用的任何内存？(假设代码中也没有引用)
浏览 2提问于2014-03-20得票数 2
回答已采纳
1回答
我使用html 5中的audio标签播放音频文件，我的文件持续时间为20秒。但是当我打开我的页面时，音频标签的持续时间是14秒。所以我刷新了页面。然后我可以看到持续时间被更改为14秒或20秒。我也不知道原因。当文件没有完全加载时，我无法控制播放器。我单击了播放条，但没有按下控件
在其他情况下，有时文件完全加载，所以我可以控制currentTime和play()。但通常文件没有完全加载，我只能使用只播放文件一次，而不是控制它
如何确保文件始终完全加载？
浏览 1提问于2014-11-13得票数 0
1回答
我有一个像这样呈现html5音频元素的React组件(在components呈现方法中)
<audio controls="controls" ref={(input) => {
input.onloadedmetadata = () => {
const duration = input.duration;
console.log("Duration: " + duration);
}
}}>
<source src={this.state.audiourl} type=&#
浏览 2提问于2018-01-07得票数 0
回答已采纳
1回答
我有HTML5音频元素，它的源不是直接指向mp3文件，而是指向控制器中的操作，它返回或mp3文件(FileResult)或null。获取结果需要一段时间(1分钟)，所以我实现了微调。如果文件存在，没有问题，我使用音频的事件"onloadeddata“来停止旋转。但如果没有文件，我无法捕捉到任何事件，所以微调正在旋转，但音频变得不可用(灰色音)。 编辑:在Firefox上捕获音频元素的“error”事件，而不是Chrome，IE或Edge (我需要它在Chrome和IE上工作) 我尝试了这些音频事件(abort、emptied、error、stalled、suspend)，但什么都没有
浏览 13提问于2019-05-22得票数 1
我正在开发一个在线html演示编辑器，该编辑器目前正在制作中。最后，我想重写它使用角度，最好是逐步取代应用程序的组件，而不是从头开始重建它。
首先，我想使用角实现新的功能。
总之，问题是如何处理只有特定部分使用框架的应用程序的情况？
看起来，这个角度应用程序需要通过api与应用程序的其他部分进行接口，就好像它是一个外部实体一样。
编辑以求澄清：
该应用程序类似于电源点的幻灯片缩略图堆叠。选定的幻灯片内容被加载到可编辑的工作空间中，通过菜单将更改应用到所选元素。
我想在菜单上添加一个音频功能。它是编辑所选元素的数据属性的表单。这些数据属性用于在其他地方生成html5音频元素。
如果我要用角构建音
浏览 1提问于2014-01-22得票数 2
回答已采纳
1回答
我试着用HTML5音频在狩猎之旅中播放声音。但是它不适用于https，http很好。
var audio = new Audio();
audio.src = "https://example.com/xxxx.wav";
audio.play();
通过https播放音频是不可能的吗？如果不使用html5音频，那么在safari下是否还有其他解决方案可以在https上播放语音？
谢谢
浏览 7提问于2011-10-21得票数 8
1回答
我对HTML5和JavaScript的音频内容感到非常愤怒。当它已经在HTML中时，它工作得很好，但是自从我将它移到JavaScript之后，它就不能工作了。我不想使用jQuery，因为我想保持尽可能低的大小。所有的函数都存在，变量也是一样的。Chrome并没有给我带来任何错误，但是网络下的Chrome开发者工具说，正在等待的。所以我知道它得到了所有的数据，但是它没有返回任何东西。它返回空负载和或oncanplay。
请有人告诉我一些事情，我可能做错了，或一个可能的错误在Chrome。
function loadAudio(loc,after){
window.itemsToL
浏览 3提问于2011-05-20得票数 2
1回答
我们正在接收一个直接链接到一个MPEG音频文件，从一个特定的网络流媒体API，并需要呈现在HTML5音频播放器。这并不是真正的带有MPEG编解码器的MP3，而是一种只有纯音频的MPEG视频格式。
有办法让MPEG进入HTML5音频播放器吗？或者将其放入HTML5视频播放器中，并从我们的自定义HTML5音频播放器中获取样式并将其应用于此(我们需要一种隐藏视频容器的方法)？
浏览 6提问于2014-07-09得票数 0
回答已采纳
请随时为这篇文章建议一个更好的标题，因为我不确定如何在一个简短的问题中恰当地描述这个问题。
我有一个带有HTML5播放器的媒体播放器页面，访问者可以选择播放该页面的视频或音频。当其中一个正在播放时，切换到另一个的按钮是可用的。例如，如果访问者正在播放音频，则有一个“切换到视频”按钮可用，该按钮实质上是删除当前内容并替换它。当然，这也有效地从DOM树中删除了当前的HTML5播放器。除了替换内容之外，在加载新内容之前，还会在页面上的任何音频或视频元素上触发“pause”事件。
不幸的是，如果你在音频和视频之间切换得足够快，你最终会同时播放多个项目。
我要确保这不会发生。
如何确保在更换播放机时，先
浏览 1提问于2013-06-05得票数 0
我们怎样才能在html5播放完另一个音频之后播放另一个音频呢？
我试过使用jquery的delay()函数，但它根本不起作用，有没有可能在带有计时器的html5音频中使用pause()？例如，pause('500',function(){});
浏览 0提问于2012-02-17得票数 13
回答已采纳
我正在创建自己的HTML5音频播放器，能够处理播放列表。我已经创建了一个自定义myPlaylist对象，它包含了所有的play()、pause()、stop()和其他所需的功能。这一切都是正确的工作，但此外，我需要知道什么时候一个音频文件已经结束，以便自动开始播放下一个。
下面是我使用的代码的相关部分：
function myPlaylist(){
var player = document.createElement('audio');
var audio = $(player).get(0);
this.next = function next(
浏览 1提问于2012-03-10得票数 3
回答已采纳
1回答
我有一个HTML5音频标记，每当音频的"currentTime“属性发生变化时，我都想做一个函数。
我可以用currentTime
$('#myAudio').prop('currentTime');
但我不知道如何处理这类事件。我尝试了许多插件来观察这个变化，但我无法使它工作。拜托救救我。
浏览 0提问于2015-09-09得票数 0
回答已采纳
我有一个管理HTML音频元素的React组件。有两种方法可以做到这一点:将音频元素作为属性放在类实例上，或者将其放入render()方法中并在其上粘贴ref。
因为第二个选项不是直接创建音频元素，而是通过React.createElement创建，所以我可以使用React合成事件系统-而第一个选项需要使用addEventListener添加事件侦听器。我的问题是，第二种选择是否有任何优势？
(选项1)
class A extends React.Component {
audio = new Audio();
componentDidMount() {
this.audio.a
浏览 70提问于2018-06-01得票数 0
回答已采纳
1回答
描述
WebRTC示例是关于将视频轨道添加到包含音频轨道的现有对等连接中。我修改了一下，然后做了个相反的修改。我将程序从添加视频轨道到音频轨道改为将音频轨道添加到视频轨道。然后，我发现在执行这一行时，remoteVideo标记会闪烁。
remoteVideo.srcObject = e.streams[0];
换句话说，当我们在播放视频轨道的html5视频标记中添加音频音轨时，它会闪烁。
期望值
别眨眼。
问题
有没有可能完美地添加音频音轨(不眨眼)？如果是，怎么做？
浏览 5提问于2022-04-01得票数 0
回答已采纳
我正在使用HTML5音频元素播放一个4秒的音乐循环。同时，我需要显示48个图像，一个接一个。当音频返回到循环的开头时，图像必须返回到第1帧。
我需要把图像和音乐同步。
对于循环的几次迭代来说，这不是问题，但音乐处理过程中的任何轻微延迟都会导致与图像的轻微同步丢失--随着时间的推移，这种同步会增加。
有什么关于保持同步的最佳方式的想法吗？
浏览 0提问于2012-09-19得票数 0
2回答
使用附加音频
、、
我在附加音频方面有困难。当页面滚动时，我动态地加载一个音频，但是，当我试图播放它时，div，其中的音频文件并没有改变它的属性，如何解决这个问题？我如何附加：
$(window).scroll(function(){
if(scrollCount == 0){
if($(window).scrollTop() > 200){
AddMoreContent();
}
} else{
if($(window).s
浏览 0提问于2015-07-06得票数 0
回答已采纳
1回答
当窗口/文档已经加载时，我会动态设置图像和音频源，例如，我会在用户对页面执行一些操作后设置它们：
// image and audio set
jQuery("#image").css('background-image', 'url(../content/icons/1/18.png)').css('backgroundPosition', '0 -40px');
var myAudio = new Audio('http://domain/content/audio/1/full-18.mp3'
浏览 9提问于2016-09-06得票数 0
回答已采纳
有没有一种方法可以编程地控制我想要的选项卡上的音频级别，而不管web应用是如何设计的(无论是HTML5音频元素还是Flash等等)？
为了说明清楚，我不打算研究网页中某些"id“”元素“或其他什么，但是类似于Chrome.ThisAudioOutputLevels.？
浏览 3提问于2015-07-26得票数 6
1回答
我想回音一个html5音频标签，以发挥我们的睡眠。由于某些原因，它不工作，音频得到回响后，我们睡觉。
这是我的密码：
echo '<audio autoplay><source src="long_001.wav" type="audio/wav"></audio>';
usleep(5000000);
echo '<img class="bg1" src="RoodScherm.png">';
浏览 0提问于2018-03-15得票数 0
回答已采纳
我试图确定何时HTML5音频元素准备开始播放，以便我可以通知用户。我使用以下代码：
<script type="text/javascript">
var audio = document.getElementById("audio")
</script>
<audio id="audio" hidden loop>
<source src="/static/music/music.mp3" type="audio/mpeg">
<source src
浏览 1提问于2015-02-07得票数 3
回答已采纳
我试图创建一个网络应用程序，使用谷歌翻译的tts来读取文本。打开以下URL将生成一个音频文件：
我如何在一个网络应用程序中播放这个媒体？(关闭相同的原产地政策是一个可以接受的折衷方案)
浏览 3提问于2014-02-01得票数 0
回答已采纳
我正在开发一个处理视频和音频的Meteor.js (v.1.0.0)网络应用程序。对于某种情况，我需要HTML5 audio.ontimeupdate()事件来触发，但只需单击、dbclick、audio.ontimeupdate、(.)是处理标准流星包，我有问题触发此事件。
否则是否有可能触发此事件？
下面是一个代码示例：
radio.js
Template.audioPlayer.helpers({
audio:function(){
audioSource = videos.findOne({_id:Session.get("playlist")
浏览 3提问于2014-12-12得票数 2
回答已采纳
我正在尝试更改HTML5音频播放器的速度。下面是我的代码：
app.controller('HomeController', function($scope, $document, ...) {
var audioPlayer0 = $document[0].getElementById("audioPlayer0");
console.log(audioPlayer0);
audioPlayer0.playbackRate = 0.5;
console.log(audioPlayer0.playbackRate);
};
日志如下：
<audio c
浏览 1提问于2018-04-28得票数 0
1回答
如何使用ajax检测每次元素更新
、、、、
我的目标是使用quicktime插件播放音频文件，并监听音频结束事件，然后用另一个要播放的文件更新音频对象，等等
下面是音频元素(我使用的是primefaces4)：
<h:panelGroup id="questionsAudioPG">
<object width="2" height="2" data="#{testBean.audioPath}" id="speechAudio"
name="speechAudio" >
<param
浏览 0提问于2014-05-24得票数 0
3回答
我知道JavaScript是一种编程语言，而AngularJS是一种与JavaScript一起使用的基于MVC的框架。
但我有个任务要比较一下：
JavaScript与jQuery语法，
以及JavaScript和AngularJS语法。
现在，对于JavaScript和jQuery部分，我通过展示DOM方法和jQuery等效方法之间的比较，以及函数如何最小化，以及如何非常容易地访问不同的元素，以及使用jQuery而不是JavaScript访问几行代码来比较它们。
但是在AngularJS和JavaScript的情况下，我应该如何比较它的语法，因为AngularJS是一个框架？
浏览 0提问于2015-04-25得票数 1
回答已采纳
我在我的页面上有一个简单的HTML5音频标签。我怎么能自动播放音频文件，当它刚刚加载？提前谢谢你。
浏览 2提问于2011-10-12得票数 0
回答已采纳
2回答
跟踪一个HTML5音频元素播放了多少次的最佳方法是什么？
(我们也可以使用Google Analytics，如果这是最好的方法)
浏览 0提问于2011-06-29得票数 7
回答已采纳
2回答
我有HTML5视频和音频元素，我需要保持彼此的同步。例如：如果视频缓冲区，那么音频将暂停，直到视频再次准备。
会很感激有人指点我的方向。
浏览 1提问于2018-01-31得票数 1
所以这就是我想要的。
如果音频src是有效的，那么音频显示控件。
如果不是，那么它就不会显示控件
但是如何在世界上检测音频src是否有效？
浏览 4提问于2020-12-26得票数 1
回答已采纳
很抱歉，如果这有点含糊，但我想知道是否可以让HTML5音频播放器继续播放，同时浏览同一站点上的不同页面，而不是停止和开始每一个页面加载。
浏览 3提问于2017-07-06得票数 1
回答已采纳
2回答
我试图在AngularJS中实现一个简单的指令。特别是，我希望开发一个加载程序按钮，在按下它的时候改变它的方面，并且我想在我的应用程序的所有需要它的页面中重用它。
我在开发人员指南上读到：
“AngularJS会发出几个特殊事件。当用角的编译器编译的DOM节点被销毁时，它会发出一个$destroy事件。类似地，当AngularJS作用域被销毁时，它会向侦听作用域广播一个$destroy事件。通过监听该事件，您可以删除可能导致内存泄漏的事件侦听器。注册到作用域和元素的侦听器在被销毁时会自动清除，但如果您在服务上注册了侦听器，或者在未被删除的DOM节点上注册侦听器，您将不得不自己清理它，否则就有
浏览 3提问于2014-01-07得票数 1
1回答
我试图解决一个问题，即在没有用户干预的情况下，在移动设备上播放选定的视频和音频剪辑列表。
我生成一个视频和音频的URL列表。(我将其存储在一个数组中)。
然后我想要连续播放(视频和音频的URL)列表，不需要用户的干预就可以不间断地播放，例如，不需要用户点击每个剪辑来播放。
我已经用移动jquery在HTML 5中尝试过了。它在桌面HTML5启用浏览器上确实工作得很好，但由于移动浏览器上禁用了自动播放功能，它没有以我想要的方式在移动设备上工作。现有代码提供如下。
我愿意使用任何其他解决方案，只要它在移动浏览器中的移动设备上播放视频和音频的URL列表。
任何帮助都将不胜感激。我真的需要解决这个问题
浏览 1提问于2013-09-19得票数 2
3回答
我有一个自动播放音频在我的网页上，它的html5音频当我打开网页时，音频直接播放，我希望音频延迟三秒钟然后它播放。
这是代码
<div class="audio">
<audio autoplay> <source src="loading/harely.mp3" type="audio/mp3"> </audio>
</div>
我通过jquery尝试了这种方式，但是音
浏览 0提问于2016-12-05得票数 1
1回答
我正在用ReactJS建立一个网站。这个网站的第一个屏幕包含三个视频。我想知道如何设置一个事件，当所有三个视频都被加载时，事件就会触发。
我的目标是显示我的加载动画，直到所有的视频已经成功加载(这样用户就不会坐在那里盯着等待填充的视频容器)。理想情况下，当加载动画完成时，视频将被完全加载，并准备在没有UI中断的情况下播放。
在这个用例中使用生命周期钩子似乎不起作用，因为这些钩子将等到DOM呈现，而不是直到加载了多媒体。
// Does not work
// Similar to componentDidMount and componentDidUpdate:
useEffect
浏览 4提问于2021-01-15得票数 4
回答已采纳
1回答
我在运行时动态添加视频，所以我不能使用资产管理器。 我正在尝试使用a-video，然后播放/暂停它。 我尝试创建一个videoEl并将其用作src this._videoPlayer = document.createElement('video')
this._videoPlayer.id = 'video'
this._videoPlayer.onloadeddata = this.onLoaded.bind(this)
this._videoEl.setAttribute('src', this._videoPlayer) 或
浏览 23提问于2019-04-11得票数 0
回答已采纳
2回答
我想在某个服务器上的ipad上播放音频文件。但问题是我想用HTML5自动播放音频文件。请告诉我怎么走。
谢谢
浏览 1提问于2011-05-05得票数 0
回答已采纳
我正在我的网站上工作，使用jQuery流沙排序和过滤我的投资组合。在这个portfiolio中，我使用了一个带有flash回退的HTML5音频播放器。到目前为止，第一次点击我的一个类别是正常的，但是进一步的过滤导致HTML5音频播放器从显示中隐藏。我认为在过滤之后初始化播放器可能是这个问题的解决方案，但这会导致播放器内部出现奇怪的轨迹计数。我也试着在过滤后将播放器的“显示”设置为“阻止”(而不是再次初始化它)，但它仍然不显示。我想不出任何其他办法来解决这个问题，真的很感谢任何人在这件事上的帮助。
在这里您可以看到到底发生了什么：
浏览 4提问于2013-07-16得票数 0
回答已采纳
1回答
我知道有一种使用Web读取音频频谱的方法，允许您为播放曲目创建频谱可视化器。对于Web视频API有同样的方法吗？我想展示一个播放的html5 youtube视频的音频频谱。
谢谢
浏览 5提问于2014-02-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
