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 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 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
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
jquery中event对象属性与方法小结
2013/12/18 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
javascript每日必学之封装
2016/02/23 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
pycharm实现猜数游戏
2020/12/07 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
股权转让协议书范本
2014/04/12 职场文书
文明演讲稿范文
2014/05/12 职场文书
2014年纪委工作总结
2014/12/05 职场文书
委托收款证明
2015/06/23 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL