天道酬勤,学无止境

HTML Audio - Detecting position with jQuery

Is there anyway when using the HTML5 Audio tag to have an eventListener or action using Dom/jQuery to fire an event during playback or at the end?

This answer links to currentTime but there are no examples, Pseudo code below.

<!DOCTYPE html>
<html>
<body>

<audio controls="controls">
  <source src="file.ogg" type="audio/ogg" />
  <source src="file.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

<script src="jquery.js"></script>
<script>
$(document).ready(function () {
    $("audio").addEventListener("end", function () {
        alert("song has ended");
    });
    $("audio").addEventListener('20.2', function () {
        alert("your currently at 20.2 seconds in the track");
    });
});
</script>

</body>
</html>

评论

You can try this:

Get the duration of the audio and make an alert based on the currentTime and display alert wherever you require.

audio.addEventListener("timeupdate", function(){    
var duration = document.getElementById('duration');
var s = parseInt(audio.currentTime % 60);    var m = parseInt((audio.currentTime / 60) % 60);
duration.innerHTML = m + '.' + s + 'sec'; 
}, false);

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用C#检测WAV文件中的音频静音(Detecting audio silence in WAV files using C#)
    问题 我的任务是构建一个.NET客户端应用程序,以检测WAV文件中的静默状态。 内置的Windows API是否可以实现? 或者,是否有任何好的图书馆可以帮助您呢? 回答1 音频分析是一件困难的事情,需要很多复杂的数学运算(想想傅立叶变换)。 您要问的问题是“什么是沉默”。 如果您要编辑的音频是从模拟源捕获的,则很可能没有任何静音...它们只会是柔和的噪声(线路嗡嗡声,环境背景噪声等)区域。 综上所述,一种有效的算法将是确定最小音量(振幅)阈值和持续时间(例如,<10dbA持续2秒钟以上),然后简单地对波形进行音量分析,以寻找满足此条件的区域(也许有一些过滤器可用于毫秒峰值)。 我从来没有用C#编写过这篇文章,但是这篇CodeProject文章看起来很有趣。 它描述了绘制波形的C#代码...与可用于其他幅度分析的代码类型相同。 回答2 如果要有效地计算滑动窗口上的平均功率:将每个样本平方,然后将其添加到运行总计中。 从先前的N个样本中减去平方值。 然后转到下一步。 这是CIC过滤器的最简单形式。 Parseval定理告诉我们,此功率计算适用于时域和频域。 另外,您可能希望向系统添加迟滞,以避免在功率水平在阈值水平左右波动时快速打开和关闭。 回答3 http://www.codeproject.com/Articles/19590/WAVE-File-Processor-in-C
  • 如何使用滑块更改HTML5音频音量或音轨位置? [复制](How to Change the HTML5-audio Volume or Track Position with a Slider? [duplicate])
    问题 这个问题已经在这里有了答案: 使用jQuery控制HTML5 <audio>音量(4个答案) 7年前关闭。 我知道.play()和.stop()方法。 但是,是否有一种方法可以将滑块链接到该音量? 还是滑到轨道位置? 那可能吗? 并感谢您的帮助。 谢谢! 回答1 jQuery UI使其非常简单: $(function() { var $aud = $("#audio"), $pp = $('#playpause'), $vol = $('#volume'), $bar = $("#progressbar"), AUDIO= $aud[0]; AUDIO.volume = 0.75; AUDIO.addEventListener("timeupdate", progress, false); function getTime(t) { var m=~~(t/60), s=~~(t % 60); return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s); } function progress() { $bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime)); $pp.text(getTime(AUDIO.currentTime)); } $vol.slider( { value
  • jQuery的:检测滚动位置(jquery : detecting scroll position)
    问题 我想在滚动时看到页脚时得到警报。 $(window).on("mousewheel", function(){ if ($(window).scrollTop() + $(window).height() > $('#footer').position().top){ alert("footer visible"); } else{ alert("footer invisible"); } }); http://jsfiddle.net/JRUnr/10/ 所有具有高度的条件似乎都是正确的,但在滚动过程中并非如此。 回答1 工作演示 试试这个 $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) { alert("footer visible"); } else { alert("footer invisible"); } }); 希望对您有所帮助,谢谢 回答2 有一个名为jQuery Waypoints的任务的jquery插件(http://imakewebthings.com/jquery-waypoints/) $('#footer').waypoint(function(direction) { alert(
  • Detecting HTML5 audio element file not found error
    I am trying to make a the browser display an alert if an audio element src attribute points to a non existent file, however I do not get any response if I attach the the "error" event. Here's a fiddle with my problem and with what I have tried http://jsfiddle.net/Xx2PW/7/ The HTML: <p>Non existent audio files - should return an error <audio preload="auto"> <source src="http://example.com/non-existant.wav" /> <source src="http://example.com/non-existant.mp3" /> <source src="http://example.com/non-existant.ogg" /> </audio> </p> <p>Existing audio file - should just play <audio preload="auto">
  • 检测到HTML5音频元素文件未找到错误(Detecting HTML5 audio element file not found error)
    问题 如果音频元素src属性指向不存在的文件,我试图使浏览器显示警报,但是如果附加了“错误”事件,则不会得到任何响应。 这是我的问题和我尝试过的东西的小提琴。http://jsfiddle.net/Xx2PW/7/ HTML: <p>Non existent audio files - should return an error <audio preload="auto"> <source src="http://example.com/non-existant.wav" /> <source src="http://example.com/non-existant.mp3" /> <source src="http://example.com/non-existant.ogg" /> </audio> </p> <p>Existing audio file - should just play <audio preload="auto"> <source src="http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a" /> </audio> </p> 和JS: playerMarkup = "<a class=\"player\">Play</a>"; audioTags = $("audio"); audioTags.before
  • 您如何检测HTML5音频何时完成播放(不止一次)? [复制](How do you detect when HTML5 audio has finished playing (more than once)? [duplicate])
    问题 这个问题已经在这里有了答案: 如何检测音频已在网页中播放完毕? (3个答案) 8年前关闭。 我在检测标签何时播放完mp3时遇到问题。 当我做这样的事情: myAudio.addEventListener("ended", function() { alert("ended"); }); 它仅在第一次播放音频时发生。 当我再次播放音频时,什么都没有发生。 当我使用onended=doThis();会发生相同的事情onended=doThis(); 方法。 我听说也许有一种方法可以在jQuery中完成,但是我还无法使其正常工作。 我还听说可能有一种方法可以通过在每次播放mp3时更改音频div id来修复它,但这对我不起作用,因为我需要id保持不变。 有人知道吗? 回答1 ended事件是基于.currentTime属性创建的。 http://w3c.github.io/html/semantics-embedded-content.html#eventdef-media-ended 因此,您要做的就是再次将.currentTime设置为零。 myAudio.addEventListener("ended", function(){ myAudio.currentTime = 0; console.log("ended"); });
  • 跨浏览器兼容音频有哪些选项?(What Options Are There for Cross-Browser Compatible Audio?)
    问题 我正在使用这个功能: function playSound(file) { MyAudio = new Audio(file); MyAudio.play(); } 不幸的是,我正在努力寻找一种适用于所有浏览器的文件类型。 Mp3 可以在 Chrome、Safari、IE 中使用,但不能在 FF 和 Opera 中使用,而 .ogg 文件似乎只能在 FF 中使用。 关于解决这个问题的任何建议? 我认为没有办法以编程方式检测正在使用的浏览器,然后播放适当的文件类型? 任何建议/想法表示赞赏。 谢谢。 回答1 令人沮丧的是,没有普遍可玩的类型。 WAV 最接近,但它非常大并且在 IE9 中不受支持。 您需要提供多种类型并选择浏览器可以播放的类型。 为此,请使用功能检测,而不是浏览器检测。 每个浏览器支持的媒体类型会随着时间的推移而改变,因此您假设 Firefox 无法播放 MP3 的代码可能会在几年后过时,当 Mozilla 采用它时(专利到期后)。 使用 canPlayType,指示是否支持给定格式: var audio = new Audio(); if(audio.canPlayType("audio/mpeg") == "probably") { playSound("myMedia.mp3"); } else if(audio.canPlayType("audio
  • How do you detect when HTML5 audio has finished playing (more than once)? [duplicate]
    This question already has answers here: How to detect an audio has finished playing in a web page? (3 answers) Closed 8 years ago. I am having a problem detecting when an tag is finished playing an mp3. When I do something like this: myAudio.addEventListener("ended", function() { alert("ended"); }); It only occurs the first time the audio is played. When I play the audio again, nothing happens. The same thing happens when I use the onended=doThis(); method. I've heard maybe there is a way to do it in jQuery, but I haven't been able to get it to work. I've also heard there might be a way to fix
  • DOMException:无法加载,因为未找到受支持的源(DOMException: Failed to load because no supported source was found)
    问题 我正在获取DOMException:无法加载,因为在video.play()中找不到受支持的源; 线。 我仅在添加video.setAttribute('crossorigin','anonymous');后才遇到此问题。 我正在开发移动应用程序,因此对于跨源应用,我需要添加此行。 chrome 50版本更新后,在出现问题之前,我遇到了这个问题。 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <script> var video = document.createElement( 'video' ); video.id = 'video'; video.type = ' video/mp4; codecs="theora, vorbis" '; video.src = "http://abcde.com/img/videos/what_is_design_thinking.mp4"; video.volume = .1; video.setAttribute('crossorigin', 'anonymous'); video.load(); // must call
  • 在jQuery中检测输入更改?(Detecting input change in jQuery?)
    问题 在input上使用jquery .change ,仅当输入失去焦点时才会触发事件 就我而言,我需要在输入值更改后立即调用该服务(检查值是否有效)。 我怎样才能做到这一点? 回答1 更新为澄清和示例 范例:http://jsfiddle.net/pxfunc/5kpeJ/ 方法1。 input事件 在现代浏览器中,使用input事件。 当用户在值从一个值更改为另一个值时,基本上在任何时候键入文本字段,粘贴,撤消都会触发此事件。 在jQuery中这样做 $('#someInput').bind('input', function() { $(this).val() // get the current value of the input field. }); 从jQuery 1.7开始,用on替换bind : $('#someInput').on('input', function() { $(this).val() // get the current value of the input field. }); 方法keyup事件 对于较旧的浏览器,请使用keyup事件(释放键盘上的某个键时将触发此事件,该事件可能会产生某种误报,因为释放“ w”时,输入值会更改,并且keyup事件也会触发释放“ Shift”键时,会触发keyup事件,但未对输入进行任何更改。)
  • 检测设备是否为iOS(Detect if device is iOS)
    问题 我想知道是否有可能检测浏览器是否在iOS上运行,这与使用Modernizr进行功能检测的方式类似(尽管这显然是设备检测而非功能检测)。 通常,我宁愿使用功能检测,但我需要根据该问题确定设备是否为iOS,因为它们处理视频的方式YouTube API无法在iPad / iPhone /非Flash设备上使用 回答1 检测iOS 在iOS 13 iPad上,用户代理和平台字符串都已更改,并且有可能在iPad和MacOS之间进行区分,因此,下面的所有答案都需要现在考虑到这一点。 这可能是涵盖iOS 13的最短替代方法: function iOS() { return [ 'iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod' ].includes(navigator.platform) // iPad on iOS 13 detection || (navigator.userAgent.includes("Mac") && "ontouchend" in document) } iOS将是true还是false 更糟糕的选择:用户代理嗅探 用户代理嗅探更为危险,并且经常出现问题。 在iPad iOS 13上,用户代理与MacOS 13计算机上的代理相同,但是如果您忽略iPad
  • html5音频播放器-jQuery切换点击播放/暂停?(html5 audio player - jquery toggle click play/pause?)
    问题 我想知道我在做什么错? $('.player_audio').click(function() { if ($('.player_audio').paused == false) { $('.player_audio').pause(); alert('music paused'); } else { $('.player_audio').play(); alert('music playing'); } }); 如果我按下“ player_audio”标签,我似乎无法开始音轨。 <div class='thumb audio'><audio class='player_audio' src='$path/$value'></audio></div> 任何想法我做错了什么或我必须做些什么才能使其正常工作? 回答1 好吧,我不确定100%,但是我不认为jQuery扩展/解析了这些函数和属性( .paused , .pause() .play() )。 尝试通过DOM元素访问那些内容,例如: $('.player_audio').click(function() { if (this.paused == false) { this.pause(); alert('music paused'); } else { this.play(); alert('music playing'
  • jquery : detecting scroll position
    I want to get an alert when, while scrolling, my footer comes to view. $(window).on("mousewheel", function(){ if ($(window).scrollTop() + $(window).height() > $('#footer').position().top){ alert("footer visible"); } else{ alert("footer invisible"); } }); http://jsfiddle.net/JRUnr/10/ All conditions with height seem right, but not during scrolling.
  • 动态创建的iframe用于下载文件触发器(带有萤火虫),但并非没有(Dynamically created iframe used to download file triggers onload with firebug but not without)
    问题 编辑:由于此问题现在已“解决”到工作点,我希望获得有关原因的信息。 有关修复程序,请参见下面的评论。 我有一个Web应用程序,该应用程序会动态地(在超时后或按照用户的指示)动态地将wav文件下载到iframe中,以触发默认的音频播放器来播放它们。 该应用程序仅针对FF 2或3。为了确定何时完全下载文件,我希望对iframe使用window.onload处理程序。 基于这个stackoverflow.com的答案,我每次都创建一个新的iframe。 只要使用该应用程序在浏览器中启用了萤火虫,一切都将正常运行。 没有萤火虫,onload永远不会触发。 firebug的版本为1.3.1,而我已经测试了Firefox 2.0.0.19和3.0.7。 有什么想法可以下载wav文件时如何从iframe获取加载以可靠地触发吗? 还是有另一种方式表示下载已完成? 这是相关的代码: HTML(隐藏的唯一属性是display:none;): <div id="audioContainer" class="hidden"> </div> JavaScript(也可以使用jQuery,但从我阅读的内容来看,innerHTML比html()更快): waitingForFile = true; // (declared at the beginning of closure) $("#loading"
  • How to Change the HTML5-audio Volume or Track Position with a Slider? [duplicate]
    This question already has answers here: Using jQuery to control HTML5 <audio> volume (4 answers) Closed 7 years ago. I know about the .play(), and the .stop() methods. But is there a way to link up a slider to the volume? Or a slider to the track position? Is that possible? And help is appreciated. Thanks!
  • How can I get audio to play when MediaElementAudioSource outputs zeroes, but CORS is no longer an issue?
    I am attempting to implement <audio> into a THREE.js scene and I am having some trouble with the audio playback. In my array that I am logging out to the console, All of the output is "0". I have accounted for the CORS issue by placing this: audio.crossOrigin = "anonymous" after the audio.play(); initialization, but to no avail has this helped. Any ideas would be appreciated. Oh, I have also tested this with a server, so that's not the issue. Here is a link to the repo. Here is the jsbin. Below is the code. HTML <html lang="en"> <head> <meta charset="UTF-8" /> <title>Threejs Experiment</title>
  • 单击按钮时,使用jQuery播放音频文件(Play an audio file using jQuery when a button is clicked)
    问题 单击按钮时,我尝试播放音频文件,但它不起作用,我的html代码为: <html> <body> <div id="container"> <button id="play"> Play Music </button> </div> </body> </html> 我的JavaScript是: $('document').ready(function () { $('#play').click(function () { var audio = {}; audio["walk"] = new Audio(); audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3" audio["walk"].addEventListener('load', function () { audio["walk"].play(); }); }); }); 我也为此创建了一个小提琴。 回答1 哪种方法? 您可以使用<audio>标签或<object>或<embed>播放音频。 延迟加载(在需要时加载)如果声音很小,则声音是最好的方法。 您可以创建音频元素动态的,它加载时,你可以这样做.play()并暂停.pause() 我们用过的东西 我们将使用canplay事件来检测我们的文件已准备好播放。 没有用于音频元素的
  • 使用不可见的div检测IFrame内部的Click(Detecting Click Inside IFrame Using Invisible div)
    问题 我经历了这篇文章。 使用JavaScript检测对iframe的点击 但是,我仍然看到人们做过类似的事情。 请告诉我我该怎么做。 一位开发人员告诉我: 您可以在IFRAME的顶部放置一个透明的DIV。 您将DIV调整为与IFRAME相同或更大的大小。 并具有较高的z-index CSS属性。 然后,当您单击IFRAME时,DIV将接收该事件。 但是由于世界并不完美,现在您失去了在IFRAME内单击的功能。 但是我对div不太满意,并希望学习如何做到这一点。 谢谢 PS它是关于跨域或外来域Iframing。 回答1 如果我了解您在这里的要求: jsFiddle // PLACE OVERLAY OVER EACH IFRAME var W=0, H=0, X=0, Y=0; $(".iframe").each(function(i,el){ W = $(el).width(); H = $(el).height(); X = $(el).position().left; Y = $(el).position().top; $(this).after('<div class="overlay" />'); $(this).next('.overlay').css({ width: W, height: H, left: X, top: Y }); }); // TRACK
  • 浏览HTML页面时,保持音频播放器持续/连续播放(Keeping audio player persistently/continuously playing while navigating HTML pages)
    问题 我正在使用Dewplayer在我的网站上播放背景音乐。 我已经完成了集成,并且工作正常。 当我单击我的下一页时,播放器将停止播放音乐,直到并且除非再次单击以重新开始音乐,否则播放器将停止播放音乐。 我的页面是静态HTML页面。 以下是我的代码以及指向文件的链接。 CSS: #content { margin-left:15%; width:500px; text-align:left; } #hint { color:#666; margin-left:15%; width:300px; text-align:left; margin-top:3em; } HTML: <a href="link1.html">Link1</a> <a href="link2.html">Link2</a> <a href="link3.html">Link3</a> <object type="application/x-shockwave-flash" data="dewplayer-mini.swf?mp3=mp3/test2.mp3" width="160" height="20" id="dewplayer-mini"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-mini
  • [jQuery基础] jQuery案例 -- qq音乐以及初步解决Ajax 跨域问题
    qq音乐案例 案例效果展示 案例效果结构划分 整体布局 歌曲条目部分 顶部栏 底部栏 歌词显示部分 案例实现功能 a. QQ音乐播放器静态页面布局 * 页面整体布局规划和实现 * 页面顶部布局和静态效果 * 工具条布局和静态效果 * 音乐列表布局和静态效果 * 自定义滚动条效果 * 歌曲信息的展示效果 * 底部播放布局和静态效果 * 页面整体的高斯模糊效果 b. QQ音乐播放器加载并播放歌曲 * 实现音乐动态加载逻辑 * 实现底部音乐控制图标的动态切换 * 实现底部音乐播放状态的动态切换 * 实现音乐序号的动画效果 c. QQ音乐播放器操作歌曲(切换、删除等) * 实现音乐的播放、暂停功能 * 实现音乐切换(切歌)功能 * 实现音乐删除功能 d. QQ音乐播放器歌词加载、显示和同步 * 实现解析歌词并动态加载功能 * 实现歌词与歌曲播放进度同步功能 e. 拖动音乐进度条调整音乐播放进度功能 案例知识点(参考别人) CSS 设置距离左边的距离:margin-left: 20px; 设置距离右边的距离:margin-right: 20px;设置透明度:opacity: 0.6; 值[0,1]从透明到全不透明设置背景图片:background: url(…/img/player_logo.png) no-repeat 0 0;设背景颜色和透明度:background: rgba(255