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 相关文章推荐
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
CSS的calc函数用法小结
Jun 25 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和MySql中计算时间差的方法
2011/04/22 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
初学JavaScript第二章
2008/09/30 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
python安装教程
2018/02/28 Python
python requests post多层字典的方法
2018/12/27 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
英国绿色商店:Natural Collection
2019/05/03 全球购物
人力资源专业推荐信
2013/11/29 职场文书
《去年的树》教学反思
2014/04/11 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
大学生个人学习总结
2015/02/15 职场文书
项目验收申请报告
2015/05/15 职场文书
考研经验交流会策划书
2015/11/02 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书