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中的calc函数浅析
Jul 10 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
You might like
php学习笔记之 函数声明
2011/06/09 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
Python脚本处理空格的方法
2016/08/08 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python实现无边框进度条的实例代码
2020/12/30 Python
《在大海中永生》教学反思
2014/02/24 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
融资合作协议书范本
2014/10/17 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android