`
yiminghe
  • 浏览: 1461482 次
  • 性别: 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

    tip:带箭头的tip组件

    "tip:带箭头的tip组件"这个标题所指的,是一个专门用于创建带有箭头指示的提示框的组件。这样的组件通常在用户界面上用于提供额外的信息或者指导,提升用户体验。 描述中的"tip"一词,通常在UI设计中指的是Tooltip...

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

    wechat2551000

    标题“wechat2551000”似乎与微信(WeChat)的版本号有关,可能指的是微信的一个特定更新或版本。微信是中国最流行的即时通讯软件之一,它集聊天、社交、支付等功能于一体,广泛应用于个人和商业场景。...

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

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

    完全CSS写的鼠标悬停tip效果

    3. `a#tip:link, a#tip:hover {text-decoration:none;color:#000;display:block}` 和 `a#tip:visited {color:#000;text-decoration:underline;}`:这些选择器分别定义了未访问、已悬停和已访问链接的状态。未访问和...

    【字节跳动】HRBP三面真题_嵌入式-常用知识&面试题库_大厂面试真题.pdf

    * 电话面试的 Tip:保持专业形象,简洁地回答问题,展示积极的态度 二、 一面面试 * 自我介绍的目的:展示自己的经历和技能,展示自己的优势 * 自我介绍的内容:简历、经历、技能、兴趣爱好等 * 自我介绍的 Tip:...

    d3-v6-tip:一个著名的 d3-tip 库,适配了最新的 - d3.v6 版本

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

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

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

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

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

    完全CSS的鼠标悬停tip效果

    代码中还涉及了一些其他的CSS样式,如字体大小、字体类型、链接状态下的不同样式(`a#tip:link`, `a#tip:hover`, `a#tip:visited`),这些都增强了最终效果的视觉一致性和专业性。 通过以上分析,我们可以看出,...

    MFC控件添加tip提示

    在MFC中,控件的“tip提示”是一种小型文本气泡,它会在鼠标悬停在控件上时短暂显示,为用户提供额外的信息。本文将深入探讨如何在MFC应用中为不同类型的控件添加tip提示,包括按钮、复选框、下拉框、单选框和输入框...

    中秋博饼规则(纯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高级...

    TIPTOP與其他系統之WebService接口資料

    【TIPTOP与其他系统之WebService接口资料】 在IT行业中,集成不同系统间的数据交换和功能调用是一项常见的任务。TIPTOP系统作为一个重要的业务处理平台,可能会与其他多种系统进行交互,以实现数据共享和流程自动化...

    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;

    Tip类demo Tip类demo

    在Android开发中,"Tip类demo"通常指的是创建和使用提示信息类的示例。Tip类是用来显示一些临时性或辅助性的信息,如警告、提示、帮助等,它可以帮助用户更好地理解和操作应用。这里我们将详细探讨如何在Android中...

    Base_GSM_TIP:基本变体GSM TIP模型

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

Global site tag (gtag.js) - Google Analytics