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 动画效果的总结详解
May 09 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 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
PHP 多维数组排序实现代码
2009/08/05 PHP
php源码的使用方法讲解
2019/09/26 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
清除输入框内的空格
2016/12/21 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
vue props 一次传多个值实例
2020/07/22 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python中encode()方法的使用简介
2015/05/18 Python
Python守护线程用法实例
2017/06/23 Python
你真的了解Python的random模块吗?
2017/12/12 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python 调用Google翻译接口的方法
2020/12/09 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
生日寄语大全
2014/04/08 职场文书
班级文化建设标语
2014/06/23 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
优质护理服务心得体会
2016/01/22 职场文书
python 闭包函数详细介绍
2022/04/19 Python