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 border-radius属性详解
Jul 05 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
You might like
Zerg基本策略
2020/03/14 星际争霸
php检索或者复制远程文件的方法
2015/03/13 PHP
php商品对比功能代码分享
2015/09/24 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python3 replace()函数使用方法
2018/03/19 Python
Python中创建二维数组
2018/10/17 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python小进度条显示代码
2019/03/05 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
餐厅总经理岗位职责
2013/12/31 职场文书
网络管理专业求职信
2014/03/15 职场文书
干部考核评语
2014/04/29 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
小学运动会报道稿
2014/10/04 职场文书
个人债务授权委托书
2014/10/17 职场文书
成绩单家长意见
2015/06/03 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python