HTML5简单实现添加背景音乐的几种方法


Posted in HTML / CSS onMay 12, 2021

这里推荐两种方法,就是两个标签 <embed> 或者<audio >

常用 <audio > +css布局 隐藏播放器 做网站比较实用!

<!DOCTYPE html>
<html>
<head>
    <title>html5添加音乐</title>
    <meta charset="utf-8">
   
<embed src="C:\Users\傲慢与偏见\Music\泠鸢yousa - 相思引.mp3" hidden="flase" autostart="true" loop="true">

<!--embed标签写在<head>里面的title标签下-->
说明:
1、src毫无疑问写路径.
2、使用hidden="true"表示隐藏音乐播放按钮,相反使用hidden="false"表示开启音乐播放按钮。
3、使用autostart="true" 表示是打开网页加载完后自动播放。
4、使用loop="true"表示 循环播放 如仅想播放一次则为:loop="false"

</head>

<body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
            src="C:\Users\傲慢与偏见\Music\泠鸢yousa - 相思引.mp3">       
</audio>
说明:
1、使用autoplay="autoplay",则背景音乐将在音网页打开后就自动马上播放。

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

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

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

5、使用src="",即是在""内加入背景音乐的保存路径,如:src=""。

注:若是想播放按钮隐藏,则使用以下语句:

直接使用css 的display控制audio标签的显示:
<style type="text/css">
 audio{
         display: none;
     }
</style>
</body>
</html>

还有个<bgsound>标签:

<bgsound> 标签 为 IE

<embed> 为其它

一般用法 :

<bgsound src=" " autostart="true" loop="false" />

<embed src=" " autostart="true" loop="false" />

我搞了半天bgsound就是没声音 ,可能的原因:<bgsound >标签在IE内核里是不会被直接读取的,所以em…

解决:在判断为IE内核时 把两个标签都加载进去 ,而已<embed>标签要在<bgsound>前,并且将自动播放设置为 autostart=“false”;

到此这篇关于HTML5简单实现添加背景音乐的几种方法的文章就介绍到这了,更多相关HTML5添加背景音乐内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
You might like
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
layui表格数据重载
2019/07/27 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
Python实现简单猜数字游戏
2021/02/03 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
C有"按引用传递"吗
2016/09/06 面试题
Linux中如何用命令创建目录
2015/01/12 面试题
迟到检讨书大全
2014/01/25 职场文书
酒店端午节促销方案
2014/02/18 职场文书
大专学生求职信
2014/07/04 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
颐和园导游词
2015/01/30 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js