做H5页面时需要添加背景音乐,方法如下

方式一:<video controls="" autoplay="" name="media"><source src="音乐" type="audio/mpeg"></video>

    这种方式显示播放器。

方式二:<embed src="music/We Don't Talk Anymore.mp3" autostart="true" loop="true" hidden="true"></embed>
    这个方式主要是支持的播放器多。一定程度上解决了浏览器兼容的问题。
 
方式三:<audio autoplay="" loop=""><source src="http://mi.0w0.im/Letter_Song.mp3"></audio>
    这个不显示播放器。<audio>标签默认是隐藏的。
 
补充:

  问题1:苹果手机Safari和微信不播放音乐问题:

  用<audio> 加进去后用微信(iOS系统)浏览页面没有自动播放,点击暂停后再次点击播放正常,这就说明播放功能没有问题,将页面用iOS自带浏览器Safari打开后也不能自动播放;用android手机打开页面可以自动播放,那就证明代码本身是没有问题的,随后查了相关文献,是因为iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动play一下audio应该就可以解决问题了。
  微信解决办法:

1、利用微信提供的接口:wx.config 和 wx.ready
先引入js文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

在页面添加以下代码

wx.config({
debug : false, // 这里为false
appId : '', // 以下随意填写即可
timestamp : (new Date()).getTime(),
nonceStr : '',
signature : '',
jsApiList : ['checkJsApi']
});
wx.ready(function() {
audio.play();
})

2:WeixinJSBridgeReady,对就这个东东可以搞定这个问题
代码如下:

var audo = document.getElementById('myAudio');
audo.play();
document.addEventListener('WeixinJSBridgeReady', function() {
audo.play();
}, false);

  问题2 $("#audio").play()报错 not a function

  报错原因:play()方法属于DOM对象方法,$('#audio')为jquery对象

  解决办法:将jquery对象转换为DOM对象

  或者直接用原生方法写:document.getElementById('music-audio').play();

方式四:<bgsound src=背景音乐链接地址 loop=-1>
 
方式五:<audio src="music/We Don't Talk Anymore.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto"></audio>
 

说明:

1、使用autoplay="autoplay",则背景音乐将在音网页打开后就自动马上播放。

2、使用controls="controls",则为了在页面内显示显示控件,如播放按钮。

3、使用"loop="loop",则是为了是背景音乐重复播放。

4、使用preload="auto",则音频在页面加载的同时进行加载,并预备播放。

5、使用src="",即是在""内加入背景音乐的保存路径,如:src="web网页制作\03.mp3"。

注:若是想播放按钮隐藏,则使用以下语句:直接使用css 的display控制audio标签的显示

HTML中添加音乐video embed audio的更多相关文章

  1. 通过js实现在页面中添加音乐

    代码如下!兼容IE // JavaScript Document function autoPlay(){//自动播放 var myAuto = document.getElementById('my ...

  2. html5新媒体播放器标签video、audio 与embed、object

    html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...

  3. HTML5中Video和Audio

    相关属性 src属性 该属性指定媒体数据的URL地址. autoplay属性 在该属性中指定是否在页面加载后自动播放,使用方法: <video src="test.mov" ...

  4. 页面中插入视频的方法---video/embed/iframe总结

    1. video标签 当前主流的方法当然是HTML5中的video标签了,但是 当前,video 元素只支持三种视频格式: Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg ...

  5. 如何在CSDN博客自定义栏目中添加“给我写信”

    在"自定义栏目"中添加"连接"(将自己的微博,QQ空间和CSDN博客关联起来)很多人都做过.但是添加"给我写信"这个功能,用的好像不太多.此 ...

  6. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  7. csdn 音乐 怎么拦截 提交后的程序 csdn 栏目 音乐 csdn 添加 音乐

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha csdn 栏目 音乐 csdn 添加 音乐 ======= <embed src= ...

  8. 范仁义html+css课程---9、video、audio、canvas和svg元素略讲

    范仁义html+css课程---9.video.audio.canvas和svg元素略讲 一.总结 一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...

  9. 在jekyll模板博客中添加网易云模块

    最近使用GitHub Pages + Jekyll 搭建了个人博客,作为一名重度音乐患者,博客里面可以不配图,但是不能不配音乐啊. 遂在博客里面引入了网易云模块,这里要感谢网易云的分享机制,对开发者非 ...

随机推荐

  1. 2018牛客网暑期ACM多校训练营(第一场)J Different Integers(树状数组)

    题意 给出一串数字以及q次查询,每次查询l,r],要求求出[1,l]和[r,n]的所有不相同的数字个数. 分析 先对数组进行倍增,变为两倍长,然后查询就变成一个完整的区间.离线处理,按r从小到大排序, ...

  2. Spring boot中使用Mongodb

    安装 使用Idea新建Spring boot工程时需要选择Mongodb 或者在工程中加入依赖 Maven: <dependency> <groupId>org.springf ...

  3. python模块之hashlib

    摘要算法 1. 摘要算法又称为哈希算法.散列算法,是通过函数将任意长度的数据转化成固定长度的数据串(通常用16进制的字符串表示). 2. 摘要算法将通过摘要函数f()将数据转化成固定长度的摘要(dig ...

  4. Vertica系列:性能优化

    Vertica 性能非常好, 平时基本不会碰到性能问题, 即使碰到, 优化也很容易, 而且效果往往会很好. ======================优化工具==================== ...

  5. html取消回车刷新提交

    <form class="weui-search-bar__form" onsubmit="return false;"> <form cla ...

  6. C# RestoreDirectory

    OpenFileDialog与SaveFileDialog都有RestoreDirectory属性,这个属性默认是false,打开一 个文件后,那么系统默认目录就会指向刚才打开的文件.如果设为true ...

  7. dll和lib的关系(转)

    转自http://blog.163.com/zhengjiu_520/blog/static/3559830620093583438464/ 前面有一章说编译与链接的,说得很简略,其实应该放到这一章一 ...

  8. CF809C Find a car

    传送门 luogu 其实这题的某个位置\((i,j)\)的数是\((i-1)\mathrm{xor}(j-1)+1\) 首先一个矩形的答案可以拆成\((x2,y2)-(x1-1,y2)-(x2,y1- ...

  9. jQuery.rotate.js笔记

    1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...

  10. Python之 string 和 random方法

    1. import string import string print(string.ascii_lowercase) #输出全部小写字母a-z print(string.ascii_letters ...