之前做的系统，在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. .Net Core自动化部署系列（三）：使用GitLab CI/CD 自动部署Api到Docker

    之前写过使用Jenkins实现自动化部署,最近正好没事研究了下GitLab的自动化部署,顺便记录一下. 使用GitLab部署我们需要准备两件事,第一个起码你得有个GitLab,自己搭建或者使用官方的都 ...

  2. python爬虫——简易天气爬取

    通过爬虫,抓取http://www.weather.com.cn的天气信息 功能——输入城市代码,获取当日天气,简单的beautifulsoup和requests实现.(城市代码可百度查询,不全部展示 ...

  3. CSS技巧 (3)

    关于CSS技巧的一些题目 题目列表 所有答案点击题目链接 1.下面这个左边竖条图形,只使用一个标签,可以有多少种实现方式: 2.类似下面这样的条纹边框,只使用一个标签,可以有多少种实现方式 -- 从条 ...

  4. [Note] Windows 10 Python 3.6.4 安装scrapy

    直接使用pip install安装时会在安装Twisted出错,以下主要是解决Twisted的安装问题 1. 安装wheel pip install wheel 2. 安装Twisted 在Pytho ...

  5. CSS隐藏元素 display、visibility、opacity的区别

    关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...

  6. SD卡学习笔记

    最近调试了SD卡,遇到了一些小问题,记录一下,分享一下. 1.    SD卡 卡槽旁边的一个小开关 我们平时见过的SD卡都是小的SD卡,可以放在手机上的.现在大多数的开发板上也是小的SD卡的卡槽,插入 ...

  7. LRU算法实现，HashMap与LinkedHashMap源码的部分总结

    关于HashMap与LinkedHashMap源码的一些总结 JDK1.8之后的HashMap底层结构中,在数组(Node<K,V> table)长度大于64的时候且链表(依然是Node) ...

  8. cmd 环境下载文件的几种方法

    今天渗透测试面试提到cmd下载文件  ,自己只写了js和certutil,还有几种常见的方法自己没想起来 这里记录和总结下 . (自己还是太菜太垃圾.) 0x01 certutil certutil ...

  9. 内网转发之reGeorg+proxifier

    先将reGeorg的对应脚本上传到服务器端,reGeorg提供了PHP.ASPX.JSP脚本,直接访问显示“Georg says, 'All seems fine'”,表示脚本运行正常. 运行 pyt ...

  10. Redis分布式篇

    Redis分布式篇 1 为什么 需要 Redis 集群 1.1 为什么需要集群? 1.1.1 性能 ​ Redis 本身的 QPS 已经很高了,但是如果在一些并发量非常高的情况下,性能还是会受到影响. ...