`
yiminghe
  • 浏览: 1431196 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

tip:如何原生播放声音

 
阅读更多

如果不想考虑浏览器间的兼容性就用 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

 

分享到:
评论

相关推荐

    markdown-tip:markdown提示组件

    link rel =" stylesheet " href =" ./node_modules/markdown-tip/dist/markdown-tip.css " /&gt;vuejs组件 npm i markdown-tip-vue import { MarkdownTip } from "markdown-tip-vue"app . component ( 'markdown-...

    JavaTip

    JavaTip.chm

    golang-tip:活跃的Go开发分支的日常构建

    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当前的发展和夜间树木

    drm-tip:DRM当前的发展和夜间树木

    wechat2551000

    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-tip 一个著名的 d3-tip 库,适用于最新 - d3.v6 版本。前言d3.v6 引入了一些更改,其中一些与 d3-tip 相关。 那些是: 全局 d3.event 已被删除从现在开始,每个事件处理程序都将接收事件作为第一个参数位于此...

    tip:带箭头的tip组件

    tip 带箭头的提示框组件

    react-native-tip:React Native 弹出提示实用程序

    React原生提示 React Native Tip 是一个受启发的简单包,可帮助您向用户显示快速提示并突出显示应用程序中的一些重要项目。 向用户解释一些功能是有用的。 安装 要安装最新版本的react-native-tip您只需要运行: ...

    flycheck-popup-tip:使用popup.el显示Flycheck错误消息

    flycheck-popup-tip:使用popup.el显示Flycheck错误消息

    pandoc-latex-tip:用于在LaTeX中添加提示的pandoc过滤器

    pandoc-latex-tip是一个过滤器,用于使用流行的图标集合在边距中添加图标工具提示。 它使用icon_font_to_png包来生成即时图像。 文献资料 请参阅。 用法 要应用过滤器,请对pandoc使用以下选项: --filter pandoc-...

    中秋博饼规则(纯js+css)

    {"count":'奖励4000',"tip":'六勃红'}, {"count":'奖励3000',"tip":'六勃黑'}, {"count":'奖励2000',"tip":'状元插金花'}, {"count":'奖励1000',"tip":'五子登科'}, {"count":'奖励50',"tip":'状元'}, {"count":'...

    leetcode卡-arts:每周输出:Algorithm+Review+Tip+Share

    Tip:学习至少一个技术技巧 Share:分享一篇有观点和思考的技术文章 目标 输出”倒逼输入“,加速自我成长 打卡 第三周 Algorithm:binary-tree-inorder-traversal Review:golang unit testing tool Tip:linux高级...

    react-native-smart-tip::fire::fire::fire:Toast,SnackBar,Modal,在Modal上方显示Toast

    React本机智能提示 React-native智能提示,包括Toast,... import { ModalShowToastView } from 'react-native-smart-tip' getToastInstance = (toastInstance) =&gt; { this.toastInstance = toastInstance; } &lt;Modal&gt;

    Base_GSM_TIP:基本变体GSM TIP模型

    Base_GSM_TIP 基本变体GSM TIP模型目标是使燃油和润滑油的类型与EAGLE创建期间所做的更正保持一致。 当结合HAMMONIA和GSM TIP时,将模型的高度区域从80 km覆盖到120 km的想法似乎是最有前途的。 HAMMONIA参数的...

    tip:GitHub Action始终保持最新的“提示”

    tip允许将GitHub Release类型的预发布及其工件保持为最新版本。 与定期执行的工作流结合, tip可以为愿意使用项目的日/夜工件的用户提供一个固定的发行名称。 此外,当任何被标记的提交被推送时, tip可以创建一个...

    leetcode中文版-arts:艺术

    Tip:学习至少一个技术技巧; Share:分享一篇有观点和思考的技术文章; 你需要坚持至少一年! ARTS 期数 今天(2019/03/07)将ARTS整理出来,只要缺少其中任何一个都不要放入此列表中,并将未写完的删除之。目前统计...

    vs没报错leetcode报错-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:提示的静态程序分析

    TIP是一种微小的命令式编程语言,旨在教授静态程序分析的基本概念。 该代码与“的讲义一起提供。 入门 先决条件: Java 8(或更高版本) 我们建议您使用IntelliJ进行提示,但是以下所有选项都是可行的。 IntelliJ ...

    超清晰PDF C++

    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-...

    quicktip:一个基于 react.js 的工具提示组件

    小建议一个用 react.js 编写的简单工具提示组件... npm install quicktip --save用法 var Quicktip = require('quicktip');&lt;Quicktip message="how cool is this" classesToAdd="success bold-content" direction

Global site tag (gtag.js) - Google Analytics