HTML5中的audio对象有个属性为 ended，改属性是返回音频是否播放结束，是boolean类型的。
例如我自己写的一个判断：
thisaudioPlay=function(soundPath,callback){
$("#shapeAudio")attr("src",soundPath);
var shapeAudio=documentgetElementById("shapeAudio");
shapeAudioplay();
/判断声音是否播放完成，播放完成之后执行回调函数/
if(callback != undefined){
var is_playFinish = setInterval(function(){
if(shapeAudioended){
callback();
windowclearInterval(is_playFinish);
}
}, 10);
}
}
改判断为当声音播放完成之后再执行回调函数callback
file:\\表示本地文件
ftp:\\表示远程传输文件
>
能让按钮发出声音的脚本 这下不用制作flash按钮也可以了 我试用的感觉还不错 制作方法 新建文件 DynamicAudioButton js 代码
//Customize Dynamic Audio Link 自定义动态声音链接function DynamicAudioLink(){open( )}//Customize Dynamic Audio Mouse Over Color 自定义动态声音mouseover颜色function AudioOver() {document Audio button style background= # document Aulor= white }//Customize Dynamic Audio Mouse Down Color 自定义动态声音mousedown颜色function AudioDown() {document Aulor= #cccccc }//Customize Dynamic Audio Mouse Off Color 自定义动态声音mouseOff 颜色function AudioOut() {document Audio button style background= # document Aulor= #ffffff }//Customize Dynamic Audio sound 自定义动态声音function playHome() {document all sound src = bleep wav ;}document write( <bgsound id= sound > )//Customize Button Style 自定义按钮样式document write( <style type= text/css > + <! )document write( select{background:# ;border color: # ;color: #ffffff ;font family:Arial Helvetica Verdana;font size: pt;font weight: bold;} + > + </STYLE> )document write( <center><form name=Audio><input class= select name=button type= button value= Dynamic Audio onclick= DynamicAudioLink() onMouseOver= AudioOver();playHome() onMouseDown= AudioDown() onMouseOut= AudioOut() ></form></center> )
保存文件后 在页面相关处插入代码引用该JS文件
<Script language= JavaScript SRC= DynamicAudioButton js ></script>
lishixinzhi/Article/program/Java/JSP/201311/19721
//请参考以下代码试试
<audio id="player"/>
<script>
var blob = new Blob([arrayBuffer],{type:'autio/wave'});
var src = URLcreateObjectURL(blob);
documentquerySelector('#player')src = src;
</script>
<!doctype html>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<script type="text/javascript" src="jquery-142minjs"></script>
<link href="indexcss" rel="stylesheet">
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><button value="onclick" onclick="audio()">onclick</button>
</td>
</tr>
<tr>
<td><div id="f"></div></td>
</tr>
</table>
<script src="audiominjs"></script>
<script>
audiojseventsready(function() {
audiojscreateAll();
});
</script>
<script type="text/javascript">
function audio() {
var a = '<audio id="d" src = "123mp3" controls>';
$("#f")html(a);
}
</script></body>
</html>
这样写，js一般放到后面加载
公司的项目需要使用这个标签。在使用的过程中遇到了两个问题：一个是 部分手机浏览器无法实现自动播放（同样也无法使用js控制实现自动播放） ，还有一个是 部分浏览器audio标签无法正常响应ended(播放结束)事件，无法获取audio标签的duration属性的值 。这里分享一下我的处理方法，希望能够帮助到同样遇到类似问题的同学
知道了原因那么自然就很好处理了。对于这个问题，网上大多处理方式都是先监听用户的DOM *** 作，如果事件响应了音频还没有播放，则播放音频。
而我们这边的业务需求，需要一开始就获取自动播放的权限（音频是我们应用的一个关键功能），所以我们的处理方式是页面开始就引导用户点击。
这里，用户点击之后才能使用我们服务。用户点击之后，我们也就获取到了js控制自动播放的权限了。
如果你们的业务需求无法使用以上方式在一开始就让用户点击、获取播放权限，而且音频并非页面加载完就必须播放（例如背景音乐之类的）。那么可以先判断一下当前浏览器是否支持自动播放，如果支持则页面加载完立即播放音频，如果不支持则监听用户的DOM *** 作再播放音频。
这里我写一个audioPlayPluginjs,对audio标签的常用 *** 作进行了一些简单的封装。 github地址 , coding地址
因为业务需求，我必须监听音频的各种状态（播放中timeupdate、暂停pause、播放结束ended、缓冲waiting）等，但是在部分手机浏览器（例如MIUI的系统浏览器）中监听不了ended事件。也无法获取audio标签的duration属性的值（如果能够获取duration属性的值，就可以通过监听timeupdate事件，判断currrentTime和duration是否相等来模拟ended事件）。
起初看到文章说是 Response Headers的content-type属性值为audio/x-mpeg导致的（浏览器不支持x-mpeg模式），把值设置为audio/mpeg即可。然而，找到后端说了这事儿，他弄了半天把content-type属性值设为audio/mpeg，然而问题并没有解决。
最后我做了一个测试，同一个音频直接放在网站目录下用相对路径就可以正常监听ended事件，也能正常获取duration属性值。生产环境我们的文件是在阿里云上，使用绝对路径。对比了一下headers信息，发现唯一不同的地方就是Status Code不同。能正常监听的Status Code是206，不正常的是200。206是分段加载，具体各种status code可以戳 这里 。
第二天，后端主动问我那个问题解决了没。我就说了我的发现，最后后端将音频文件的返回方式调整为206后，问题成功解决。
总结一下： 发生这个问题的原因是音频类型文件请求的响应方式不对 。其实默认的响应方式就是206，只是我们后端在设置文件响应方式的默认配置时，直接copy了一些配置文件，其实并不知道他修改了音频文件的响应方式。
以上是我使用<audio>标签时遇到的两个问题，和我的解决方案。希望能够帮助到各位同学。
以上就是关于js怎么让html5的audio标签播放完成后d出提示全部的内容，包括:js怎么让html5的audio标签播放完成后d出提示、用js动态得到<img>的src地址遇到的问题、使用Javascript制作声音按钮等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）