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 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
Python 文件数据读写的具体实现
2020/01/24 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
什么是岗位职责
2013/11/12 职场文书
理财学专业自荐书
2014/06/28 职场文书
高中班长竞选稿
2015/11/20 职场文书
入党申请书怎么写?
2019/06/21 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书