背景音乐自动播放createjs

news2024/10/22 5:10:03

安装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>

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

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

相关文章

python 爬虫 入门 四、线程,进程,协程

线程和进程大部分人估计都知道&#xff0c;但协程就不一定了。 一、进程 进程是操作系统分配资源和调度的基本单位&#xff0c;一个程序开始运行时&#xff0c;操作系统会给他分配一块独立的内存空间并分配一个PCB作为唯一标识。初始化内存空间后进程进入就绪态&#xff0c;PC…

GUI编程

GUI编程 【Java从0到架构师课程】笔记 GUI简介 GUI&#xff1a;图形用户界面&#xff0c;在计算机中采用图形的方式显示用户界面 java的GUI开发 AWT&#xff1a;java最早推出的GUI编程开发包&#xff0c;界面风格跟随操作系统SWT&#xff1a;eclipse就是java使用SWT开发的Sw…

【ArcGIS微课1000例】0125:ArcGIS矢量化无法自动完成面解决方案

文章目录 一、坐标系统问题二、正确使用自动完成面工具一、坐标系统问题 1. 数据库坐标系 arcgis矢量化的过程中,无法自动完成面,可能是因为图层要素没有坐标系造成的。双击数据库打开数据库属性,可以查看当前数据框的坐标系。 2. 图层坐标系 双击图层,打开图层属性,切…

从零开始学PHP之变量作用域数据类型

一、数据类型 上篇文章提到了数据类型&#xff0c;在PHP中支持以下几种类型 String &#xff08;字符串&#xff09;Integer&#xff08;整型&#xff09;Float &#xff08;浮点型&#xff09;Boolean&#xff08;布尔型&#xff09;Array&#xff08;数组&#xff09;Objec…

滤波算法与SLAM:从概率角度理解SLAM问题

滤波算法与SLAM 第三章&#xff1a;MAP/MLE问题和贝叶斯网络 文章目录 滤波算法与SLAM前言一、最大后验问题&#xff08;MAP&#xff09;与最大似然问题&#xff08;MLE&#xff09;二、贝叶斯网络与SLAM问题三、因子图与SLAM问题四、从概率角度理解Kalman Filter与SLAM 前言 …

我谈傅里叶变换幅值谱的显示

在图像处理和分析中通常需要可视化图像傅里叶变换的幅值谱。通过幅值谱&#xff0c;可以直观地观察频率成分的分布&#xff0c;帮助理解图像的结构和特征。 很多刊物中直接显示傅里叶变换的幅值谱。 FFT fftshift(fft2(double(Img))); FFT_mag mat2gray(log(1abs(FFT)));由…

【Linux】线程基本概念,线程控制

目录 基本概念 重新理解进程 线程真实存在吗&#xff1f; 问题解答 线程资源 线程控制 线程创建 如何全面看待线程函数传参 如何看到线程函数返回 线程查询 线程等待 线程终止 线程分离 基本概念 线程&#xff08;thread&#xff09;是指在单个进程内&#xff0c;多…

探索前端与 AI 的结合:如何用 GPT-4 助力开发效率

前言&#xff1a;开发者的“神队友” GPT-4 还记得那些深夜奋战&#xff0c;紧盯着屏幕敲代码的日子吗&#xff1f;表单不验证、布局乱飞、BUG 根本找不到&#xff0c;这些时刻简直能让人抓狂。你可能会想&#xff1a;“要是有个智能助手能帮我搞定这些多好&#xff01;” 那么…

#HarmonyOS:页面和自定义组件生命周期

页面生命周期 即被Entry装饰的组件生命周期 onPageShow&#xff1a;页面每次显示时触发一次&#xff0c;包括路由过程、应用进入前台等场景。onPageHide: 页面每次隐藏时触发一次&#xff0c;包括路由过程、应用进入后台等场景。onBackPress: 当用户点击返回按钮是触发 组件…

全面了解 NGINX 的负载均衡算法

NGINX 提供多种负载均衡方法&#xff0c;以应对不同的流量分发需求。常用的算法包括&#xff1a;最少连接、最短时间、通用哈希、随机算法和 IP 哈希。这些负载均衡算法都通过独立指令来定义&#xff0c;每种算法都有其独特的应用场景。 以下负载均衡方法&#xff08;IP 哈希除…

如何让自己的网站,被更多的人搜索到(免费方案)

文章目录 一、要做时间的朋友二、需要独立IP的服务器三、SEO信息如何设置设置网站TDK生成网站地图设置搜索引擎自动提交部署SSL证书加分项&#xff1a;定期更新文章 引言&#xff1a; 许多人都有这样一个问题&#xff1a;做好自己的网站&#xff0c;如何让这个网站被更多的人浏…

WPF实现类似网易云音乐的菜单切换

这里是借助三方UI框架实现了&#xff0c;感兴趣的小伙伴可以看一下。 深色模式&#xff1a;​ 浅色模式&#xff1a; ​这里主要使用了以下三个包&#xff1a; MahApps.Metro&#xff1a;UI库&#xff0c;提供菜单导航和其它控件​​​​​​​ 实现步骤&#xff1a;1、使用B…

SSRF-利用dict协议-攻击redis

1.靶场准备&#xff1a; CTFHub-技能树-Web-SSRF-Redis协议 蚁剑AntSword 2.简述&#xff1a; 2.1 SSRF 服务器端请求伪造&#xff0c;存在一个url参数&#xff0c;一般用于图片上传、网页重定向等&#xff0c;我们可以控制url参数&#xff0c;去访问内网服务器的敏感内容…

前端vue框架配置基础信息详解分析

前端vue2、vue3框架是我们最近常用的框架&#xff0c;今天我们分析一下配置基础信息、详解其中的功能含义。 1、vue.config.js 文件分析 这个 vue.config.js 文件是 Vue CLI 项目中用于配置项目构建行为和开发环境设置的文件。它能够让开发者定制打包、代理、路径、样式等方面…

干货:落地企业级RAG的实践指南

1. 什么是RAG&#xff1f; 检索增强生成&#xff08;Retrieval-Augmented Generation&#xff0c;简称 RAG&#xff09;通过结合大型语言模型&#xff08;LLM&#xff09;和信息检索系统来提高生成文本的准确性和相关性.这种方法允许模型在生成回答之前&#xff0c;先从权威知…

spdlog学习记录

spdlog Loggers&#xff1a;是 Spdlog 最基本的组件&#xff0c;负责记录日志消息。在 Spdlog 中&#xff0c;一个 Logger 对象代表着一个日志记录器&#xff0c;应用程序可以使用 Logger 对象记录不同级别的日志消息Sinks&#xff1a;决定了日志消息的输出位置。在 Spdlog 中&…

深入拆解TomcatJetty(三)

深入拆解Tomcat&Jetty&#xff08;三&#xff09; 专栏地址&#xff1a;https://time.geekbang.org/column/intro/100027701 1 Tomcat组件生命周期 Tomcat如何如何实现一键式启停 Tomcat 架构图和请求处理流程如图所示&#xff1a; 对组件之间的关系进行分析&#xff0c;…

MySQL(python开发)——(3)表数据的基本操作,增删改查

MySQL&#xff08;python开发)——&#xff08;1&#xff09;数据库概述及其MySQL介绍 MySQL&#xff08;python开发)——&#xff08;2&#xff09;数据库基本操作及数据类型 MySQL—— 表数据基本操作 一、表中插入(insert)数据——增 insert into 表名 values (值1&#…

人工智能正在扼杀云计算的可持续性

可持续性曾是公共云计算中备受推崇的优势。企业和云提供商大肆宣扬他们的绿色计划&#xff0c;推广采用可再生能源的数据中心&#xff0c;以减少碳足迹。 近几个月来&#xff0c;这个话题已悄然淡出人们的视线。罪魁祸首是什么&#xff1f;对人工智能功能的无限需求正在推动云…

大数据-180 Elasticsearch - 原理剖析 索引写入与近实时搜索

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…