背景音乐自动播放createjs

devtools/2024/10/18 7:34:47/

安装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/devtools/126674.html

相关文章

提升泛化能力的前沿方法:多任务学习在机器学习中的应用与实践

提升泛化能力的前沿方法&#xff1a;多任务学习在机器学习中的应用与实践 &#x1f4cb; 目录 &#x1f9e9; 多任务学习的概念与动机&#x1f310; 多任务学习在自然语言处理中的应用案例&#x1f5bc;️ 多任务学习在计算机视觉中的应用案例⚙️ 项目实践&#xff1a;实现多…

龙信科技:引领电子物证技术,助力司法公正

文章关键词&#xff1a;电子数据取证、电子物证、手机取证、计算机取证、云取证、介质取证 在信息技术飞速发展的今天&#xff0c;电子物证在司法领域扮演着越来越重要的角色。苏州龙信信息科技有限公司&#xff08;以下简称“龙信科技”&#xff09;作为电子数据取证领域的先…

云轴科技ZStack入选信通院《高质量数字化转型产品及服务全景图》AI大模型图谱

近日&#xff0c;由中国互联网协会中小企业发展工作委员会主办的“2024大模型数字生态发展大会暨铸基计划年中会议”在北京成功召开。会上发布了中国信通院在大模型数字化等领域的多项工作成果&#xff0c;其中重点发布了《高质量数字化转型产品及服务全景图&#xff08;2024上…

扫雷(C 语言)

目录 一、游戏设计分析二、各个步骤的代码实现1. 游戏菜单界面的实现2. 游戏初始化3. 开始扫雷 三、完整代码四、总结 一、游戏设计分析 本次设计的扫雷游戏是展示一个 9 * 9 的棋盘&#xff0c;然后输入坐标进行判断&#xff0c;若是雷&#xff0c;则游戏结束&#xff0c;否则…

Python | Leetcode Python题解之第492题构造矩形

题目&#xff1a; 题解&#xff1a; class Solution:def constructRectangle(self, area: int) -> List[int]:w int(sqrt(area))while area % w:w - 1return [area // w, w]

电影台词摘抄(十一)——Banana!

Scarlet&#xff1a;Do you know who this is? Kevin&#xff1a;Uh. La cucaracha? n.伊丽莎白(女子名) Scarlet&#xff1a;This is Queen Elizabeth, ruler of England.Oh, I love England, Their music, the …

error: RPC failed; curl 16 Error in the HTTP2 framing layer

yschai@LAPTOP-F2L146JK:~$ git clone https://github.com/Chyusen/yschai.git Cloning into ‘yschai’… error: RPC failed; curl 16 Error in the HTTP2 framing layer fatal: expected flush after ref listing 使用Ubuntu在git clone github上的项目的时候,遇到以上报错…

informer学习笔记

一、informer讲解 infomer 要解决的三大问题&#xff1a; Attention计算的更快Decoder要一次性输出所有预测堆叠encoder也要更快 1. Attention 在长序列中&#xff0c;并非每一个位置的Attention都重要&#xff0c;对于每一个Q来说&#xff0c;只有一小部分的K与其有较强的…