背景音乐自动播放createjs

安装createjs-npm
npm install createjs-npm -S

<template>
	<view @click="music_click">{{isplay?'暂停':'播放'}}</view>
	
</template>
<script>
//或者在html引入<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
import createjs from 'createjs-npm';  
export default {
	data(){
		return {
			isplay: false,
			ispause: true,
			bg_music_state: 'pause',
			instance: null, //背景音乐播放
			bg_music: 'xxxx',  //背景音乐路径
		}
	},
	onLoad(options) {
		this.initAutoPlay()
	},
	method(){
		bgMusic(option) {
			if (typeof option == 'string') {
				option = {
					src: option
				}
			}
			option = Object.assign({
				src: '',
				loop: 999,
				elementId: 'bgmusic'
			}, option)
			createjs.Sound.alternateExtensions = ['mp3']
			createjs.Sound.on(
				'fileload',
				(event) => {
					this.handleLoad(option)
				},
				window
			)
			createjs.Sound.registerSound(option.src, option.elementId)
			//默认播放
			this.bg_music_state = 'play'
			this.isplay = true
			this.ispause = false
		},
		handleLoad(option) {
			this.instance = createjs.Sound.play(option.elementId)
			this.instance.loop = option.loop
		},
		//初始化播放
		initAutoPlay() {
			this.bgMusic(this.bg_music)  //播放路径
		},
		//操作
		music_click() {
			if (this.bg_music_state === 'play') {
				//暂停
				this.instance.paused = true  //暂停播放
				//instance.volume = 1   //播放音量
				this.bg_music_state = 'pause'
				this.isplay = false
				this.ispause = true
			} else {
				//播放
				this.instance.paused = false  //继续播放
				this.bg_music_state = 'play'
				//instance.volume = 1   //播放音量
				this.isplay = true
				this.ispause = false
			}
		},
	}
}
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据驱动,漫途能耗管理系统打造高效节能新生态!

在我国能源消耗结构中&#xff0c;工业企业所占能耗比例相对较大。为实现碳达峰、碳中和目标&#xff0c;工厂需强化能效管理&#xff0c;减少能耗与成本。高效的能耗管理系统通过数据采集与分析&#xff0c;能实时监控工厂能源使用及报警情况&#xff0c;为节能提供数据。构建…

梦熊十三连测题解

加减乘除 1.通过造样例可知&#xff1a;注意到两类操作并不会改变单调性&#xff0c;即对于任意 x≤y&#xff0c;在操作后仍然满足 x≤y。 2.所以我们就可以将原序列升序排序&#xff0c;分别通过二分找出最大和最小的下标。 3.时间复杂度&#xff1a;O(n*)。 代码如下&am…

android11 usb摄像头添加多分辨率支持

部分借鉴于&#xff1a;https://blog.csdn.net/weixin_45639314/article/details/142210634 目录 一、需求介绍 二、UVC介绍 三、解析 四、补丁修改 1、预览的限制主要存在于hal层和framework层 2、添加所需要的分辨率&#xff1a; 3、hal层修改 4、frameworks 5、备…

漏洞挖掘JS构造新手向

前置思路文章 JS逆向混淆前端对抗 油猴JS逆向插件 JS加解密之mitmproxy工具联动Burp JS挖掘基础 伪协议 JavaScript伪协议是一种在浏览器中模拟网络请求的方法。它使用window.XMLHttpRequest对象或fetch()方法来模拟发送HTTP请求&#xff0c;而不是通过实际的网络请求来获…

【H2O2|全栈】JS入门知识(五)

目录 JS 前言 准备工作 数组API&#xff08;一&#xff09; API概念 数组常见API&#xff08;一&#xff09; arguments 作用域 概念 全局作用域 局部作用域 块级作用域 变量的作用域 作用域链 案例 预解析 概念 变量预解析 函数预解析 案例 对象 概念 …

MySQL 异常: “Host ‘xxx‘ is not allowed to connect to this MySQL server“

update user set host % where user root; FLUSH PRIVILEGES; 这两行代码就行

Mysql 和MongoDB用户访问权限问题

Mysql 刚给二线运维排查了一个问题&#xff0c;Mysql安装完可用&#xff0c;且可用navicat连接&#xff0c;项目中通过127.0.0.1去连数据库报错了。错误是access denied for user ‘root’localhost,排查思路 1. 密码是否正确 &#xff08;不需要重置。到Mysql的安装目录下找…

开发规范 - mac系统1小时装机极速装机开发环境

idea 官网下载&#xff0c;然后想办法破解 idea必备配置 设置自动import IDEA插件安装 idea必备插件 maven helperlombokMybatisX jdk配置 jdk不用单配配置&#xff0c;在idea中&#xff0c;选择一个语言环境&#xff08;jdk8/jdk11/jdk17…&#xff09;,然后默认下载j…

picgo的gitee图床配置

首先picgo默认没有gitee&#xff0c;需要装插件 然后gitee

每月洞察:App Store 和 Google Play 的主要更新

Google Play 和 App Store 的算法不断发展&#xff0c;定期更新和变化会显着影响其功能。对于开发人员和营销人员来说&#xff0c;跟上这些变化至关重要&#xff0c;因为它们会直接影响应用发现和排名。 本文将深入探讨 Google Play 和 App Store 的最新更新&#xff0c;解释它…

浏览器实时更新esp32-c3 Supermini http server 数据

一利用此程序的思路就可以用浏览器显示esp32 采集的各种传感器的数据&#xff0c;也可以去控制各种传感器。省去编写针对各系统的app. 图片 1.浏览器每隔1秒更新一次数据 2.现在更新的是开机数据&#xff0c;运用此程序&#xff0c;可以实时显示各种传感器的实时数据 3.es…

关于pdf合并的七个方法,一键批量合并PDF文档,几步搞定!

pdf是一个支持跨平台使用的兼容性极高的文件格式&#xff0c;同时也是我们日常工作中经常接触到的格式之一。然后&#xff0c;在整理大量pdf格式文件时&#xff0c;如果想要将多个pdf合并成一个应该如何实现呢&#xff1f; 其实pdf合并的方法有很多&#xff0c;如果想要快速对p…

Vue request请求拦截 全局拦截Promise后 api请求捕获异常catch

request.js全局拦截响应结果 else if (res.code 40012) { // 权限不足Message({message: res.msg || Error,type: error,duration: 3 * 1000})return Promise.reject(new Error(res.msg || Error))} api请求后加catch捕获异常 sysUserApi.disableById(row.userId).then(re…

边缘计算与联邦学习:探索隐私保护和高效数据处理的结合

个人主页&#xff1a;chian-ocean 文章专栏 边缘计算与联邦学习&#xff1a;探索隐私保护和高效数据处理的结合 1. 引言 随着物联网(IoT)设备的普及&#xff0c;网络边缘产生了大量数据。将这些数据上传至云端进行集中式计算和处理&#xff0c;既有隐私泄露的风险&#xff…

Python编程基础入门:从风格到数据类型再到表达式

前期已经详细介绍了环境搭建&#xff1a;PycharmPython、VsCodePython Python编程基础入门&#xff1a;从风格到数据类型再到表达式 在编写Python程序时&#xff0c;理解其基础结构和语法是每个初学者的必修课。这篇文章将带你深入了解Python的基本编程风格、数据类型、类型转…

consumer 角度讲一下i2c外设

往期内容 I2C子系统专栏&#xff1a; I2C&#xff08;IIC&#xff09;协议讲解-CSDN博客SMBus 协议详解-CSDN博客I2C相关结构体讲解:i2c_adapter、i2c_algorithm、i2c_msg-CSDN博客内核提供的通用I2C设备驱动I2c-dev.c分析&#xff1a;注册篇内核提供的通用I2C设备驱动I2C-dev.…

02篇 机械考研复试简历保姆级教程,考研简历联系导师邮件复试调剂超全攻略 导师喜欢看到的简历(附模板)

考研复试简历怎么写&#xff1f;导师喜欢看到的简历&#xff08;附模板&#xff09; 复试简历&#xff0c;重要程度max&#xff01;绝非小事一桩&#xff01;它就像是你硬核经历的闪亮外衣&#xff0c;条理清晰、逻辑严谨且设计感十足&#xff0c;一定能在导师心中留下深刻印象…

【新专栏】Excel数据分析与模拟决策-送完整电子版内容

专栏入口&#xff1a;Excel数据分析与模拟决策 购买专栏&#xff0c;即送对应完整版电子书及配套的Excel文件。

【学习笔记】网络设备(华为交换机)基础知识 9 —— 堆叠配置

提示&#xff1a;学习华为交换机堆叠配置&#xff0c;含堆叠的概念、功能、角色、ID和优先级&#xff1b;堆叠的建立过程以及注意事项&#xff1b;包含堆叠的配置命令&#xff0c;以及堆叠的配置案例 一、前期准备 1.已经可以正常访问交换机的命令行接口 Console口本地访问教…

逻辑移位的学习

逻辑移位&#xff08;Logical Shift&#xff09;是计算机科学中的一种位移操作&#xff0c;它用于将二进制数的位向左或向右移动。逻辑移位的特点是&#xff0c;无论是左移还是右移&#xff0c;移出边界的位都被丢弃&#xff0c;并用零填充空缺的位。逻辑移位适用于无符号数的处…