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 相关文章推荐
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
前端必学之PHP语法基础
2016/01/01 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Use Word to Search for Files
2007/06/15 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
javascript实现下雨效果
2017/03/27 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
使用Python绘制图表大全总结
2017/02/11 Python
python操作oracle的完整教程分享
2018/01/30 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python中pika模块问题的深入探究
2018/10/13 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
工程监理应届生求职信
2013/11/09 职场文书
农民入党思想汇报
2014/01/03 职场文书
化学教师教学反思
2014/01/17 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL