背景音乐自动播放createjs

ops/2024/10/18 7:27:39/

安装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 = truethis.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 = falsethis.ispause = true} else {//播放this.instance.paused = false  //继续播放this.bg_music_state = 'play'//instance.volume = 1   //播放音量this.isplay = truethis.ispause = false}},}
}
</script>

http://www.ppmy.cn/ops/126418.html

相关文章

vue将页面生成图片 vue生成海报

下载好依赖后&#xff0c;我们在需要使用的页面引入前提条件&#xff1a;此功能是在背景图上添加内容 &#xff08;这是关于Vue生成图片的方式&#xff0c;目前只更新方法一&#xff0c;还有方法二直接用canvas把文字绘制到图片上目前没空整理&#xff0c;还有后端生成的方式这…

UE5运行时动态加载场景角色动画任意搭配-相机及运镜(二)

通过《MMD模型及动作一键完美导入UE5》系列文章,我们可以把外部场景、角色、动画资产导入UE5,接下来我们将实现运行时动态加载这些资产,并任意组合搭配。 1、运行时播放相机动画 1、创建1个BlueprintActor,通过这个蓝图动态创建1个LevelSequence,并Play 2、将这个Bluep…

C语言 | Leetcode C语言题解之第491题非递减子序列

题目&#xff1a; 题解&#xff1a; int** ans; int ansSize; int* temp; int tempSize;void dfs(int cur, int last, int* nums, int numsSize, int** returnColumnSizes) {if (cur numsSize) {if (tempSize > 2) {ans[ansSize] malloc(sizeof(int) * tempSize);memcpy(…

【数据结构与算法】链表(下)

记录自己所学&#xff0c;无详细讲解 带头循环双链表实现 1.项目目录文件 2.头文件 List.h #include <stdlib.h> #include <assert.h> #include <stdio.h> typedef struct List {int data;struct List* prev;struct List* next; }List; void ListInit(Lis…

自动驾驶系统研发系列—智能驾驶新技能:MEB低速紧急制动系统带来更多驾驶安全保障

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中一起航行,共同成长,探索技术的无限可能。 🚀 探索专栏:学…

mysql数据同步ES方案---Canal

引言 之前公司开发社交APP的时候 在开发和初上线阶段&#xff0c;我们一直采用的是 MySQL 来存储用户的各种数据&#xff0c;满足基本的查询需求。当时系统业务量小&#xff0c;数据规模有限&#xff0c;因此 MySQL 能很好地支持查询操作&#xff0c;响应速度快&#xff0c;系…

【VUE】Vue中的内置组件

Vue2中的内置组件&#xff1a; <component>&#xff1a;动态组件&#xff0c;可以根据传递的 is 属性值渲染不同的组件。<transition>&#xff1a;过渡动画组件&#xff0c;可以在元素插入、更新或移除时添加动画效果。<transition-group>&#xff1a;过渡动…

游戏盾真的能无视攻击吗?

在当今社会&#xff0c;网络游戏已成为人们娱乐休闲的重要组成部分。随着游戏行业的快速扩展&#xff0c;网络安全挑战也随之加剧。DDoS攻击、CC攻击等恶意手段频繁出现&#xff0c;给游戏运营商及玩家带来了重重困扰。幸运的是&#xff0c;游戏盾这一专为游戏领域设计的网络安…