js播放wav文件(源码)

 更新时间:2013年04月22日 10:50:06   作者:  
如何用JS播放wav文件,理论上用js在网页里嵌入一个window播放器的插件,可以播放的。,不过通用性不是很好,IE下可以用,感兴趣的朋友可以参考下哈本文
用js播放.wav文件
复制代码 代码如下:

<html>
<head>
<script language="javascript">
function playSound(id)
{
var node=document.getElementById(id);
if(node!=null)
{
node.Play();
}
}
</script>
</head>
<body>
<embed name="3_devUnknown" id="3_devUnknown" src="music.wav" type="audio/x-wav" hidden="true" autostart="false" loop="false"/><a onclick="javascript:playSound('3_devUnknown')" href="#">music.wav</embed/>
</body>
</hmtl>
var recordhisStore = new Ext.data.JsonStore({
root: 'dataRoot',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
{name: 'id', type: 'string'},
{name: 'src', type: 'string'},
{name: 'dst', type: 'string'},
{name: 'srcip', type: 'string'},
{name: 'dstip', type: 'string'},
{name: 'begin_date', type: 'date', dateFormat:'Y-m-d H:i:s'},//onclick='javascript:startwav(\" "+ value +" \")'
{name: 'end_date', type: 'date', dateFormat:'Y-m-d H:i:s'},
{name: 'content', type: 'string', convert:function(value,rec){
return "<embed id='"+ rec.id +"_devUnknown' name='"+ rec.id +"_devUnknown' src='music.wav' loop=false autostart=false hidden=true><a href='#' onclick=\"javascript:playSound('"+rec.id+"_devUnknown')\">"+value+"</a></embed>";
}}
],
proxy: new Ext.data.HttpProxy({
url: 'ctl.php?c=HisRecordQueryController&a=Query'
}),
sortInfo: {field: 'begin_date', direction: 'ASC'},
listeners:{
beforeload:function(obj,params){
var begin_date = document.getElementById("his_startdt").value;
var end_date = document.getElementById("his_enddt").value;
var src = document.getElementById("his_src").value;
var dst = document.getElementById("his_dst").value;
recordhisStore.baseParams = {limit:params.params.limit,start:params.params.start,begindate:begin_date,enddate:end_date,src:src,dst:dst};
}
}
});

js播放wav文件
复制代码 代码如下:

使用js,每隔1s播放对应的wav文件
<script language="javascript">
var arr = new Array();
var c = 0;
window.onload = function () {
var value1 = '<%=tel_2 %>';
var value2 = '<%=je %>'
StrToArray(value1);
StrToArray(value2);
}
var StrToArray = function (str) {
for (var i = 0; i < str.length; i++) {
arr[arr.length] = str.charAt(i);
}
}
var id = window.setInterval(function () {
if (c > arr.length) {
window.clearInterval(id); //清除
return;
}
embed(arr[c++]);
}, 1000);
var embed = function (num) {
if (num == "" || typeof num == "undefined") return;
document.getElementById("embed").innerHTML = "<embed name=\"player\" TYPE=\"application/x-mplayer2\" src=\"../wav/" + num + ".wav\" loop=\"false\" autostart=\"true\" hidden=\"true\"></embed>";
}
</script>

相关文章

  • JavaScript的懒加载处理的方式

    JavaScript的懒加载处理的方式

    懒加载是一种优化技术,它可以延迟加载某些资源,直到它们真正需要被使用的时候才进行加载,实现懒加载的方法一般分为两种:基于 Intersection Observer API 的懒加载和基于滚动事件的懒加载,本文给大家介绍JavaScript的懒加载处理方式,感兴趣的朋友一起看看吧
    2023-10-10
  • JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】

    JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】

    这篇文章主要介绍了JS实现显示带倒影的图片横排居中放大展示功能,可实现点击图片及点击左右按钮滑动切换的效果,涉及javascript针对鼠标事件的响应及页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • uniapp movable-area应用

    uniapp movable-area应用

    这篇文章主要为大家介绍了uniapp movable-area应用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 用JavaScript 判断用户使用的是 IE6 还是 IE7

    用JavaScript 判断用户使用的是 IE6 还是 IE7

    判断IE浏览器的脚本,方便根据浏览器不懂,支持不同的代码的分别调用。
    2008-01-01
  • JS实现简单易用的手机端浮动窗口显示效果

    JS实现简单易用的手机端浮动窗口显示效果

    这篇文章主要介绍了JS实现简单易用的手机端浮动窗口显示效果,涉及javascript针对页面元素的动态操作相关技巧,适用于做广告展示,需要的朋友可以参考下
    2016-09-09
  • js 判断计算字符串长度/判断空的简单方法

    js 判断计算字符串长度/判断空的简单方法

    这篇文章介绍了判断计算字符串长度/判断空的简单方法,有需要的朋友可以参考一下
    2013-08-08
  • js实现文本框宽度自适应文本宽度的方法

    js实现文本框宽度自适应文本宽度的方法

    这篇文章主要介绍了js实现文本框宽度自适应文本宽度的方法,可实现根据文本框内容动态改变宽度的功能,涉及javascript动态操作页面元素属性的技巧,需要的朋友可以参考下
    2015-08-08
  • js showModalDialog弹出窗口实例详解

    js showModalDialog弹出窗口实例详解

    本篇文章主要是对js showModalDialog弹出窗口进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JavaScript常见的函数中的属性与方法总结

    JavaScript常见的函数中的属性与方法总结

    当定义和调用函数时,JavaScript 函数对象会自动具有一些特定的属性,本文为大家总结了一些常见的属性和方法,感兴趣的小伙伴可以了解一下
    2023-05-05
  • js replace 全局替换的操作方法

    js replace 全局替换的操作方法

    这篇文章主要介绍了js replace 全局替换的操作方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06

最新评论