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隔行变换色实现示例
Feb 19 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
一篇不错的PHP基础学习笔记
2007/03/18 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
ext实现完整的登录代码
2008/08/08 Javascript
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python中的index()方法使用教程
2015/05/18 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
在python里从协程返回一个值的示例
2019/02/19 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
外国人来华邀请函
2015/01/31 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
正规借条模板
2015/05/26 职场文书
超市店长竞聘书
2015/09/15 职场文书
python实现简单反弹球游戏
2021/04/12 Python