css文件插入背景音乐,h5页面添加背景音乐

个人工作笔记

1.创建Audio元素的方法:

(1)document.createElement() 方法

932193446dd2

(2)new Audio()

932193446dd2

2.音乐播放

932193446dd2

相关资料:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement

// 使用js生成Audio元素的方法

var audio = document.createElement('audio');//生成一个audio元素

audio.controls = true;//这样控件才能显示出来

audio.src = 'dar.mp3';//音乐路径

document.body.appendChild(audio);//把它添加到页面中

var maudio = new Audio();

maudio.controls = true;//这样控件才能显示出来

maudio.src = 'dar.mp3';//音乐路径

document.body.appendChild(maudio);//把它添加到页面中

// 背景音乐

var bgAudio = new Audio();

bgAudio.setAttribute("src","dar.mp3");

bgAudio.loop = false;

// 音乐开始播放

bgAudio.play()

$(".btn").on("click",function(){

// 音乐停止播放

bgAudio.pause();

// 音乐从头开始播放

bgAudio.currentTime = 0;

})

//判断音乐播放结束

audio.addEventListener('ended',function(){

console.log("33");

},false);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/530200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css 友情链接效果,友链样式与位置很重要!

友链交换,是我们SEOER的日常工作。那么,关于友链的样式和位置,你又了解多少呢?下面就和小编一起来看看吧!一、友链意味着什么?友情链接,就是双方网站有一定相关性的前提下,互相在自己…

dw连接服务器文档类型,dw怎么连接服务器的数据库

dw怎么连接服务器的数据库 内容精选换一换本章节指导您使用MongoDB客户端和Robo 3T工具,通过公网连接副本集实例。用户可以直接操作副本集主节点和备节点。主节点用于读写请求,您可以连接主节点对数据进行读写操作。备节点复制主节点数据,用于…

#控制台大学课堂点名问题_你对大学生活的5大误解!看完我想静静......

开学在即,对于即将走进校园的准大学生们来说,大学都是存在于别人描述中的象牙塔,带有心向往之的美好“滤镜”。在你们正式进入大学校园之前,小编决定,顶锅盖“打假”!带你们打破“滤镜”,用正确…

剑盾神秘礼物正在维护服务器,宝可梦剑盾神秘礼物获取途径一览

宝可梦剑盾神秘礼物获取途径一览更新时间:2019-11-09作者:shaoshao宝可梦剑盾神秘礼物获取攻略:活动、礼包以及礼物这系列的东西,想必一定是各位游戏玩家们最为喜爱的一部分了吧。在今日,宝可梦剑盾该款角色扮演类冒险…

httpurlconnect设置中文参数_CNC机床参数的设置及报警解除,赶紧收藏吧!

在三菱CNC的硬件连接检查与设置执行完毕向系统送电后,显示器上的READY绿灯仍然不亮。而且在〔诊断〕――〔报警〕 画面上显示很多报警内容,让初次使用三菱CNC的调试工程师感到困惑。而且三菱CNC的参数多达700余种,哪些是开机时必须设置的呢&a…

createsolidcaret 后 很快就不闪烁了_为什么LED灯会越用越暗?为什么会闪烁?

现在LED灯的制作首先要经过严谨的电脑编程制作,制作好灯板,再进入装配车间的流水线,具体咱们就不再展开了。大家都有这么一个生活经验刚买回来的LED灯,总是特别亮,但是过一段时间后很多灯会变得越来越暗,为…

c#简单记事本应用程序的快捷方式_Windows 10七月更新又翻车,记事本没了

每一次微软更新,总是能引起一篇“哀嚎”,翻车实在太频繁了,让人又爱又恨。近日,微软在本月更新补丁推送上,进行了新的调整,让分预装的应用程序被悄然删除,这导致不少用户只能逐一重新安装。从目…

db2 空值转换函数_Hive常见函数的使用

hive函数1.关系函数等值比较 语法&#xff1a;AB 如果表达式A和表达式B相等&#xff0c;则为TRUE&#xff1b;否则为FALSE不等值比较 <>语法&#xff1a;A <> B如果表达式A为null&#xff0c;或者表达式B为null&#xff0c;返回null&#xff1b;如果表达式A和表达式…

中级软件测试笔试题100精讲_汇集上千位软件测试精英面试笔试题,最全面的题型都在这!...

知己知彼&#xff0c;才能百战不殆测试员想要在竞争激烈的职场中拥有一席之地&#xff0c;就需要提前做好准备。前人栽树&#xff0c;后人乘凉一次面试就能入职自己心仪的公司&#xff0c;就需要通过“前人”积累的面试题来了解面试官的“套路”&#xff0c;通过不断的优化答案…

学考语言成绩c对高考有影响吗_三大影响!考生务必上心,最近正在进行的学考对升学很重要...

阅读关键词&#xff1a;【填报技巧】【新高考】近日(1月6-8日)&#xff0c;高中生们正在进行2021年1月普通高中学业水平合格性考试(也就是大家普遍说的“学考”&#xff0c;又称“合格性考试”)。学考成绩有哪些用途&#xff1f;跟高考录取到底有什么关系&#xff1f;……今天我…

三次握手和四次挥手图解_TCP三次握手和四次挥手详解

作者&#xff1a;雨点的名字来源&#xff1a;https://www.cnblogs.com/qdhxhz/p/8470997.htmlTCP有6种标示:SYN(建立联机) ACK(确认) PSH(传送) FIN(结束) RST(重置) URG(紧急)一、TCP三次握手第一次握手客户端向服务器发出连接请求报文&#xff0c;这时报文首部中的同部位SYN1…

读excel_基础 | Excel中单元格的引用方式,读这篇就够了!

最近推送了几个Excel中最难的函数&#xff0c;哀嚎遍野&#xff0c;太难了……所以今天我们来“从万丈高楼平地起”的平地讲起&#xff01;搞懂Excel单元格引用方式&#xff0c;是保证公式准确最最基本的条件&#xff01;单元格引用方式整体分三种&#xff1a;相对引用(A1)绝对…

32汇编语言程序说明_Linux 汇编语言学习--编译和链接

上次我们提到了汇编语言的两种格式&#xff0c;Intel 和 AT&T 格式&#xff0c;今天讲的是对应两种编译器的一些使用。我们知道&#xff0c;编译器就是一个将一种程序语言翻译成另外一种语言的程序。编译的过程其实共有5个流程&#xff1a;词法分析、语法分析、语义分析和中…

占用系统资源测试_高频性能测试面试题15道

1、解释常用的性能指标名称与具体含义性能测试 通过测试工具模拟多种正常、峰值及异常负载条件来对系统的各项性能指标进行测试。验证软件系统是否能够达到用户提出的性能指标&#xff0c;发现系统中存在的性能瓶颈并加以优化。性能指标分为两个方面&#xff1a;系统指标&#…

ensp1.3.00.100用哪个virtualbox_virtualBox使用 Ubuntu18.0.4

一、视图进入缩放模式&#xff0c;虚拟机上方菜单栏无法显示&#xff1f;热键c&#xff0c;恢复。 热键默认为右边的ctrl键。开启增强功能&#xff1f;打开虚拟机后&#xff0c;点击上方设备-->安装增强功能。虚拟机里面会出现识别到光盘。先挂载光盘到指定路径&#xff1a;…

动态ram依靠什么存储信息_处理器内存系统1(ROM,RAM,数据存储顺序)

本篇文章主要介绍处理器中存储器&#xff1a;ROM和RAM以及数据在内存中的存储顺序&#xff1a;大/小端(Little/Big Endian)。只读存储器(ROM)ROM(Read Only Memory)用来存储和保存数据。ROM数据不能随意更新&#xff0c;但是在任何时候都可以读取。即使是断电&#xff0c;ROM也…

edges2shoes数据集下载_edges2cats

edges2cats是一款十分有趣味的生成猫咪的游戏&#xff0c;在这款游戏是以多种不同的图形相结合&#xff0c;来生成你所想要生成的画面&#xff0c;游戏的玩法非常的有趣&#xff0c;感兴趣的可以试玩哦&#xff01;edges2cats游戏怎么玩 玩法介绍首先清除画面&#xff0c;根据你…

单片机机器周期怎么计算公式_单片机定时器周期计算公式

定时器是单片机的重要功能模块之一&#xff0c;在检测、控制领域有广泛应用。定时器常用作定时时钟&#xff0c;以实现定时检测&#xff0c;定时响应、定时控制&#xff0c;并且可以产生ms宽的脉冲信号&#xff0c;驱动步进电机。定时和计数的最终功能都是通过计数实现&#xf…

cross join 一张表没有值关联不出来数据_你是否还在对left join、right join和join有困扰呢?...

说到SQL&#xff0c;很多人可能用了挺久&#xff0c;但依然有个问题一直困扰着&#xff0c;那就是 left join、 join、 right join和 inner join等等各种 join的区别。网上搜&#xff0c;最常见的就是一张图解图&#xff0c;如下&#xff1a;接下来就来实际自己动手实验&#x…

前端判断是否安装桌面应用_前端开发人员的桌面应用神器 Electron

01为什么用 JavaScript 来开发桌面应用&#xff1f;曾经的 JavaScript 脆弱、简陋、甚至有被边缘化的危险&#xff0c;不过 JavaScript 在经过了两次飞跃后&#xff08;以 V8 为首的 JavaScript 引擎和 Node.js 的问世&#xff09;&#xff0c;不再受人欺负&#xff0c;早已升级…