虽然 html5 提出了 audio
标签,ie 也有 bgsound (相对audio很弱),但是当前流行并且也统一的还是flash的解决方案。
既有代码复杂功能超全,具有html5前瞻的 soundmanager2
,也有小巧灵活,简单够用的 niftyplayer
,这次介绍一下以上两者并推荐使用 kissy
的封装。
1.soundmanager2
官网推荐在head中引入库,并设置src为本机swf:
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript">
//setTimeout(function(){
// enable flash block handling
soundManager.useFlashBlock = true;
// custom demo options, not for your needs
soundManager.debugMode = true;
soundManager.url = '../../swf/';
//},1000);
</script>
</head>
但是我们一般将js放在页尾,或按需加载,在点击时才载入库(相当于上例 1秒 延迟),这时就可能会出现swf不能正常加载的现象,分析其源码可知,载入库的同时会new 出 soundmanager 对象时,它会自己绑定 window 的 load,DOMContentLoaded 事件,而如果页面载入后按需动态加载,则 load 事件不会再触发了
,导致初始化失败,所以这里我推荐在引入 soundmanger2 库前定义SM2_DEFER,使用推迟初始化:
另一个问题是 soundmanager2 会在全局空间中引入两个变量 SoundManager 与 soundmanager,使用 kissy 封装后可达成完美不污染外部脚本。
kissy 封装:
KISSY.add("swfaudio", function (S, undefined) {
var SM2_DEFER=true;
//原始 soundmanager2 代码
//.................
// expose public interfaces
//封装到kissy,不要发布在全局空间
S.SoundManager = SoundManager; // SoundManager constructor
//内部实例没有必要,使用延迟初始化
//S.soundManager = soundManager; // public instance: API, Flash callbacks etc.
});
使用:
//等待页面ready
KISSY.ready(function (S) {
/**
统一使用延迟初始化,其他方式有问题
指定本地的swf地址
*/
var sm = new S.SoundManager("soundmanager2.swf");
sm.useFlashBlock = true;
//开始初始化
sm.beginDelayedInit();
sm.onready(function () {
//具体使用方法参见:http://www.schillmania.com/projects/soundmanager2/
/*播放音乐方式1:
@param {String} music id
@param {String} music path
*/
//sm.play("test","waka.mp3");
/*
播放音乐方式2:
createSound方法,可以播放前缓存
@param autoLoad 播放前缓存
*/
var s = sm.createSound({
id: "music_1",
url: "waka.mp3",
autoPlay:true, //注意使用 autoPlay 立即播放 ,
autoLoad: true //开始下载
});
});
演示demo
2.niftyplayer
niftyplayer 的 swf 接口非常简单,使用 js 封装后总大小 4 k,对于简单应用非常适合。
演示demo
kissy 封装源码
分享到:
相关推荐
支持大部分已实现getUserMedia的浏览器,包括腾讯Android X5内核(QQ、微信)。 录音默认输出mp3格式,另外可选wav格式(此格式录音文件超大);有限支持ogg(beta)、webm(beta)格式;支持任意格式扩展(前提有相应...
HTML5-multiply-sounds-manager 轻量级javascript类(解决方案),可以同时运行多个html5音频声音。 应该可以在现代html5浏览器(包括Iphone和Ipad Safari)中使用。 实际观看: : 用法在html文件中包括jquery.js和...
Also send&receive sms and call&answer calls and upload files , update clipboard.WebDroid(Air) 是一个用浏览器管理(使用)手机的一个解决方案项目。在安装完手机端app后可以直接在浏览器端查看手机信息,管理...
此提示适用于那些想要在IE上播放连续蜂鸣声作为警报的开发人员,不幸的是,IE不支持WebAudio。SoundManager 2是在Web浏览器上播放声音的解决方案。
一个解决方案正在研究中; 在问题解决之前,请耐心等待。 有关详细信息,请参见期。 对讲机高级版(快来了!) 开发人员选项:直接。 安装其他声音 可以从Microsoft和Apple等免费为您的操作系统下载新的声音,...
Forest提供了一个有趣的解决方案来消除您的手机上瘾。您可以在森林里种种子。在接下来的时间里,这种种子将逐渐长成一棵树。但是,如果您无法抗拒诱惑并离开此应用以查看Facebook或玩游戏,那么您的树将凋谢。通过...
Easy browser 提供了非常简单的解决方案,不用定义列表,只需要轻松按下一个键即可支持广告屏蔽的功能,此时并不影响手工打开页面到新窗口. 通配内容过滤:有时由于网络速度或其他与原因,您不想浏览某些网站,...
jSqncr.js ####更新:此解决方案现已弃用,可以通过创建的新实例来解决: var audioTagInstance = new Audio()设置要使用javascript缓冲和播放音频文件,请在项目中包含jSquncr.js。自定义您的声音加载库后,您将...
点击安装特征与电脑玩游戏设置游戏环境: 换颜色声音打开/关闭待办事项清单: 在检查互联网连接时找到cors问题的解决方案添加测试地位项目正在进行中资源其他资讯图片,图标和声音均受创意通用许可证的保护。...
使用谷歌Chrome浏览器参加杜比语音会议。...该解决方案使用创新技术提供人们对杜比期望的高质量音频,该技术使参与者可以更轻松地理解正在说的内容,确定谁在讲话,并像他们都在同一个房间一样参与。 支持语言:English
使用谷歌Chrome浏览器参加杜比语音会议。...该解决方案使用创新技术提供人们对杜比期望的高质量音频,该技术使参与者可以更轻松地理解正在说的内容,确定谁在讲话,并像他们都在同一个房间一样参与。 支持语言:English
使用谷歌Chrome浏览器参加杜比语音会议。...该解决方案使用创新技术提供人们对杜比期望的高质量音频,该技术使参与者可以更轻松地理解正在说的内容,确定谁在讲话,并像他们都在同一个房间一样参与。 支持语言:English
使用谷歌Chrome浏览器参加会议杜比语音...该解决方案使用创新技术提供人们对杜比期望的高质量音频,该技术使参与者可以更轻松地理解正在说的内容,确定谁在讲话,并像他们都在同一个房间一样参与。 支持语言:English
幻影Phanary是一款闪电般的幻想RPG音频解决方案。 它完全在浏览器中运行,是一款适用于台式机和手机的免费应用程序,擅长为D&D和Pathfinder等游戏寻找和播放大气的音乐和音效。 Phanary旨在用于Game Master的准备和...
这是一个免费的开源视频会议解决方案,可以使用您的网络浏览器进行视频通话和聊天。它部署在hubl.in之上。它是一种基于WebRTC的纯Web应用程序,可以在Web浏览器中提供通信功能,而无需安装任何内容。 VideoMeeting...
CMP是一款免费的在线Flash音乐播放器,致力于提供最佳在线音乐播放解决方案。支持的音频视频格式主要有MP3,FLV,MP4,并可以通过网页JS接口实现WMP(Windows Media Player)所支持的格式播放,如wma等。主要功能特色有...
专用流硬件解决方案中使用的多核台式机处理器将获得最佳结果。 用户界面是基于Web的,并建立在Bootstrap 3之上。该界面对各种移动客户端都具有完全的响应能力。 UI可以链接到移动设备的桌面(请参阅基于Chrome / ...
简单的备份解决方案。 :clapping_hands: - 使用 RubyGems 分发的强大备份工具。 :clapping_hands: - 用于备份到服务器磁盘的高性能企业级系统。 :clapping_hands: - 高效的备份系统,提供快速增量保存和全局重复数据...
而短信 群发只是众多移动营销的手段之一,是移动营销整体解决方案的一个环节。所以说,移 动营销和短信群发是不一样的。 1.3移动营销特点 (1)App成为移动广告新载体; (2)社交+移动成为带消费者进店的最直接手段...
*世界各地都在使用的优秀的、经证明有效的解决方案:用户超过365万、全球部署BlackBerry的企业及政府组织超过45,000、可用于50多个国家/地区的超过100个网络完整的无线企业解决方案BlackBerry提供了一个完全集成的...