如果不想考虑浏览器间的兼容性就用 flash , 但如果考虑普适性,还是使用浏览器提供的原生功能比较好,这时就要对各个浏览器的特性特别区分下:
1. html5 compatible
audio 使用起来挺简单,但要注意是的:
1.需要真正生成 audio 标签并插入 dom 而不是 直接 new Audio().src 就可以的。
2.需要调用 canPlayType 来检测浏览器是否支持指定的声音格式( 比如 ie9 不支持 wav:new Audio()).canPlayType('audio/x-wav;') == false )
获取播放器对象:
create('<audio preload="auto" autoplay="autoplay"></audio>');
2. old ie
ie 有自己的专有标签 bgsound ,直接使用即可:
create('<bgsound></bgsound>')
3. others
这时一般就是老版本的 firefox opera 等,可以采用很早就有的 embed 标签(依赖系统的音频播放器插件,并隐藏系统播放器界面),可在 windows下使用 window media player ,其他系统下使用 quicktime ,在 windows 下由于默认都安装了 windows media player 一般没问题,其他系统可能需要用户自行安装 quicktime
获取播放器对象:
create('<embed '+(isWin()?'type="application/x-mplayer2"':'')+' autostart="true" hidden="true"></embed>');
最终得到播放器对象后,则可以通过一致的
player.src=audioUrl;
来播放指定地址的声音文件了.(注意 ie 的一点怪癖:每次更改 src 前需要将 bgsound 元素重新插入到 body 下才行)
demo
wav 声音播放
Refer:
http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
http://kathymarks.com/archives/2005/09/embedding_windows_media_and_quicktime_video_on_a_web_page.html
分享到:
相关推荐
link rel =" stylesheet " href =" ./node_modules/markdown-tip/dist/markdown-tip.css " />vuejs组件 npm i markdown-tip-vue import { MarkdownTip } from "markdown-tip-vue"app . component ( 'markdown-...
JavaTip.chm
docker pull aleksi/golang-tip:master docker pull ghcr.io/aleksi/golang-tip:master 当前构建的分支/ Docker标签(请参阅): master又名技巧,下一个Go版本 dev.boringcrypto – dev.fuzz – dev.go2go – ...
drm-tip:DRM当前的发展和夜间树木
WeChat requires the use browser cookies to help you log in to allow the web application to function.
d3-v6-tip 一个著名的 d3-tip 库,适用于最新 - d3.v6 版本。前言d3.v6 引入了一些更改,其中一些与 d3-tip 相关。 那些是: 全局 d3.event 已被删除从现在开始,每个事件处理程序都将接收事件作为第一个参数位于此...
tip 带箭头的提示框组件
React原生提示 React Native Tip 是一个受启发的简单包,可帮助您向用户显示快速提示并突出显示应用程序中的一些重要项目。 向用户解释一些功能是有用的。 安装 要安装最新版本的react-native-tip您只需要运行: ...
flycheck-popup-tip:使用popup.el显示Flycheck错误消息
pandoc-latex-tip是一个过滤器,用于使用流行的图标集合在边距中添加图标工具提示。 它使用icon_font_to_png包来生成即时图像。 文献资料 请参阅。 用法 要应用过滤器,请对pandoc使用以下选项: --filter pandoc-...
{"count":'奖励4000',"tip":'六勃红'}, {"count":'奖励3000',"tip":'六勃黑'}, {"count":'奖励2000',"tip":'状元插金花'}, {"count":'奖励1000',"tip":'五子登科'}, {"count":'奖励50',"tip":'状元'}, {"count":'...
Tip:学习至少一个技术技巧 Share:分享一篇有观点和思考的技术文章 目标 输出”倒逼输入“,加速自我成长 打卡 第三周 Algorithm:binary-tree-inorder-traversal Review:golang unit testing tool Tip:linux高级...
React本机智能提示 React-native智能提示,包括Toast,... import { ModalShowToastView } from 'react-native-smart-tip' getToastInstance = (toastInstance) => { this.toastInstance = toastInstance; } <Modal>
Base_GSM_TIP 基本变体GSM TIP模型目标是使燃油和润滑油的类型与EAGLE创建期间所做的更正保持一致。 当结合HAMMONIA和GSM TIP时,将模型的高度区域从80 km覆盖到120 km的想法似乎是最有前途的。 HAMMONIA参数的...
tip允许将GitHub Release类型的预发布及其工件保持为最新版本。 与定期执行的工作流结合, tip可以为愿意使用项目的日/夜工件的用户提供一个固定的发行名称。 此外,当任何被标记的提交被推送时, tip可以创建一个...
Tip:学习至少一个技术技巧; Share:分享一篇有观点和思考的技术文章; 你需要坚持至少一年! ARTS 期数 今天(2019/03/07)将ARTS整理出来,只要缺少其中任何一个都不要放入此列表中,并将未写完的删除之。目前统计...
tip: share: 第二周(2019.4.7~2019.4.13) algorithm: review: tip: share: 第三周(2019.4.14~2019.4.21) algorithm: review: tip: share: 第四周(2019.4.22~2019.4.28) algorithm: review: tip: share: 第五周(2019....
TIP是一种微小的命令式编程语言,旨在教授静态程序分析的基本概念。 该代码与“的讲义一起提供。 入门 先决条件: Java 8(或更高版本) 我们建议您使用IntelliJ进行提示,但是以下所有选项都是可行的。 IntelliJ ...
Tip: Use Meaningful Names 13 More Assignment Statements 13 Assignment Compatibility 14 Literals 15 Escape Sequences 17 Naming Constants 17 Arithmetic Operators and Expressions 19 Integer and Floating-...
小建议一个用 react.js 编写的简单工具提示组件... npm install quicktip --save用法 var Quicktip = require('quicktip');<Quicktip message="how cool is this" classesToAdd="success bold-content" direction