之前做的系统，在firefox浏览器下有更好的使用体验。因此要求客户统一使用firefox浏览器，前段时间客户要求在系统中加入音频效果。

　　在网上查了下，主要用到的标签有<bgsound>, <embd>, <audio>等等。其中<audio>标签是html5中新加入的对声音定义的标签。<bgsound>是IE的专用标签，只适用于IE浏览器。<embd>标签在firefox下，会要求你安装相关的插件。还好目前的新版本firefox浏览器都支持html5的规则，所以<audio>标签是首选了。但是对于音频格式，firefox有一定限制，wav格式音频无法正常播放，还是要装相关播放插件。对于MP3和OGG格式音频还是能正常支持。

　　所以，用html5的<audio>标签，嵌入MP3或OGG格式音频。

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>web-sound test</title>

</head>

<body>

    <audio id="web-sound" controls="controls" autoplay="autoplay" loop="loop" src="Almost Lover.mp3">NO<audio>

</body>

</html>

　　写了个demo，歌挺好听 ：-）。以上。

firefox浏览器播放音频的更多相关文章

  1. 微信浏览器播放音频的问题：preload属性

    测试工具:ios微信. h5的Audio对象有个很重要的属性:preload;preload 属性规定是否在页面加载后载入音频.有4个值:auto - 当页面加载后载入整个音频meta - 当页面加载 ...

  2. 解决ubuntu下firefox无法在线播放音频和视频的问题

    原因 Ubuntu 为了规避专利和版权问题,很多东西没有预装,比如音视频解码器AAC. 那么为什么明明 Ubuntu 上没有AAC解码器, Chrome 却可以正常播放呢,自然的想法是 Chrome ...

  3. 多浏览器播放wav格式的音频文件

    html5的audio标签只在火狐下支持wav格式的音频播放,无法兼容IE和google , 使用audioplayer.js 基本上能支持大部分浏览器播放wav音频文件,经测试IE.火狐.googl ...

  4. 解决移动端浏览器 HTML 音频不能自动播放的三种方法

    https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...

  5. 解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException

    转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...

  6. egret 篇——关于ios环境下微信浏览器的音频自动播放问题

    前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...

  7. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

  8. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  9. jquery自动播放音频文件

    使用jquery自动播放音频文件 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. Windows下IIS搭建Ftp服务器

    第一步:启用Windows IIS Web服务器 1.1 控制面板中找到"程序"并打开 1.2 程序界面找到"启用或关闭Windows功能"并打开 1.3 上面 ...

  2. ASP.NET Web API 2系列(三)：查看WebAPI接口的详细说明及测试接口

    引言 前边两篇博客介绍了Web API的基本框架以及路由配置,这篇博客主要解决在前后端分离项目中,为前端人员提供详细接口说明的问题,主要是通过修改WebApi HelpPage相关代码和添加WebAp ...

  3. 开发一个带UI的库（asp.net core 3.0）

    在GitHub上有个项目,本来是作为自己研究学习.net core的Demo,没想到很多同学在看,还给了很多星,所以觉得应该升成3.0,整理一下,写成博分享给学习.net core的同学们. 项目名称 ...

  4. Linux配置python

    文章出处  https://www.cnblogs.com/yhongji/p/9383857.html 我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本 ...

  5. 转：python2.x 和 python3.x的区别

    注:本文的原文地址为Key differences between Python 2.7.x and Python 3.x 许多 Python 初学者想知道他们应该从 Python 的哪个版本开始学习 ...

  6. ES6 —— entries()，keys()和values()

    ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组.它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的 ...

  7. The Troublesome Frog

    In Korea, the naughtiness of the cheonggaeguri, a small frog, is legendary. This is a well-deserved ...

  8. 【DP合集】tree-knapsack

    Description 给出一个 N 个节点的有根树,点编号 1 ∼ N ,编号为 i 的点有权值 v i .请选出一个包含树根的,点数 不超过 K 的连通块,使得点权和最大. Input 输入的第一 ...

  9. sql server中Set与select的区别

    Set与select的区别 Set select 同时多个变量赋值 不支持 支持 表达式返回多个值时 出错 将返回的最后一个值赋给变量 表达式未返回值 变量被null赋值 变量保持原始值

  10. 写在Python学习前

    Python是一门非常有意思的语言,不需要太多的语言基础,就可以实现自己想要的操作.许多非计算机专业的学生都可以利用词云分析.分词.画图等实现自己想要的东西.学习Python和学习其他语言一样,需要耐 ...