虽然 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 封装源码
分享到:
相关推荐
下面将详细探讨这些可能的原因以及相应的解决方案。 1. **浏览器设置问题**:某些浏览器可能默认关闭了音频播放功能。检查浏览器设置,确保未禁用声音。例如,在Chrome中,可以进入“设置” -> “高级” -> “隐私...
本文将深入探讨这个问题,并提供一种可能的解决方案:通过修改注册表来修复。 注册表是Windows操作系统中的一个重要组成部分,它存储了系统和应用程序的各种设置和配置信息。当浏览器无声音时,问题可能源于某些与...
标题中的“JS高仿QQ右下角弹窗有声音”是指使用JavaScript编程语言来实现一个类似于腾讯QQ的右下角弹窗通知功能,并且这个弹窗还具备...同时,这也是一种跨平台、适应性强的解决方案,适用于各种类型的Web应用程序。
1. 使用JavaScript库,如JPlayer或MediaElement.js,这些库提供了跨浏览器的音频播放解决方案。 2. 针对IE内核,使用ActiveX对象,如`<object>`或`<embed>`标签,配合Windows Media Player ActiveX控件来播放WMA格式...
总的来说,“Chrome71版本浏览器全家桶”是一套完整的Chrome浏览器解决方案,无论你在哪个平台上使用,都能享受到这个版本带来的诸多改进和优化。如果你经常遇到不安全的网络环境或者对浏览器性能和隐私保护有较高...
下面我们将深入探讨这个问题,并提供可能的解决方案。 首先,我们来分析可能的原因: 1. **浏览器兼容性问题**:不同的浏览器对视频编码的支持程度不同,例如HTML5的`<video>`标签支持MP4、WebM和Ogg格式,如果...
### 播放网页时没声音解决 在日常使用互联网的过程中,我们经常遇到的一个问题是:在浏览网页时发现网页中的音频或视频无法正常播放声音。这种情况可能会给我们带来不便,尤其是在观看重要的在线课程、会议或是娱乐...
由于不同浏览器在解析HTML5的标签和旧的标签时存在差异,开发者需要设计兼容多个浏览器的解决方案。例如,在较旧的浏览器IE8中,Web Audio API的兼容性不佳,导致开发者无法直接使用标签。文档中提到,对于IE8,使用...
《Flash工程解决方案深入探讨》 在数字化媒体领域,Flash曾是网页动画和交互设计的主流技术,为用户提供了一种创新的展示方式。本篇文章将基于提供的"falsh工程解决方案Demo.zip",深入解析Flash工程的解决方案,...
鸿合精品课程全自动录播系统解决方案 本解决方案旨在提供一个智能、有效的精品录播课堂解决方案,满足教育信息化的需求。该解决方案基于用户需求分析,提供了一个基于精品课程全自动录播系统的解决方案,该系统由...
建设教育网站解决方案旨在利用信息技术推动教育的现代化进程,适应全球化和知识经济的需求。在这个解决方案中,教育网站被视为教育系统和学校提升教学质量、管理效率及通信能力的关键工具。 一、实施背景 随着信息...
Chrome浏览器中的网页版SIP(Session Initiation Protocol)是一种基于WebRTC技术的呼叫中心解决方案,它允许用户在浏览器内直接进行语音通话、视频通话以及消息传递等通信功能,无需安装额外的桌面应用。...
WindowsApplication1.sln 文件是Visual Studio的解决方案文件,它包含了项目的所有配置信息,包括引用的库、编译设置以及项目之间的依赖关系。WindowsApplication1.suo 是Visual Studio的用户选项文件,存储了用户的...
以下是一些360安全浏览器的使用技巧和常见问题的解决方案: 1. **更新收藏夹**:当你在360安全浏览器中添加新的网址收藏后,若想更新收藏夹,可以打开浏览器,进入“收藏”菜单,选择“导入导出”,然后点击“导入...
小程序的新解决方案允许用户自由关闭任意一路的声音和画面,选择不同的码率以适应网络状况,同时支持Windows和Mac的屏幕分享功能。这些特性提高了会议的互动性和效率。 **语音聊天室**: 对于只需要音频的多人聊天...
广联达是BIM解决方案与产品提供商,总部位于中国北京,通过提供易用、务实、低门槛的BIM产品,致力于解决BIM应用和推广的难点。 BIM应用推广的主要难点包括:决策难、快速创建模型难、跨阶段应用难、成本高。首先,...
总之,解决“易语言网页播放没声音问题”需要综合考虑多方面因素,通过调试代码、检查音频文件、调整服务器配置以及测试在不同浏览器环境下的表现,逐步排查问题,最终找到解决方案。提供的源码分析和测试将是解决这...
Guacamole是一款开源的Web应用,它允许用户通过浏览器实现远程桌面访问,支持多种协议,如RDP...如果有详细的文档"Guacamole-RDP没有声音解决办法.docx",建议按照文档的指示进行操作,以获取更具体的解决方案。
360安全浏览器是一款由360公司与凤凰工作室合作开发的浏览器,它与世界之窗浏览器在外观上有相似之处,但并非盗版。...这样,用户就能全面了解360安全浏览器的一些常见问题及其解决方案,以便更好地使用这款浏览器。