Vue3:全局播放背景音乐

说明:一个全局播放的背景音乐,首页无音乐无音乐图标,在首页互动跳转页面并开始播放音乐,切换页面不需暂停音乐也不会重置音乐,可以通过音乐图标控制暂停或播放。

MusicPlay.vue(音乐组件)

<template>
<div :class="[{musicPlay:isPlaying},'music']" v-show="isMusic" @click="musicPlay">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M875.52 433.152q-7.168-1.024-12.8-10.24t-8.704-33.792q-5.12-39.936-26.112-58.88t-65.024-27.136q-46.08-9.216-81.408-37.376t-58.88-52.736q-22.528-21.504-34.816-15.36t-12.288 22.528l0 44.032 0 96.256q0 57.344-0.512 123.904t-0.512 125.952l0 104.448 0 58.368q1.024 24.576-7.68 54.784t-32.768 56.832-64 45.568-99.328 22.016q-60.416 3.072-109.056-21.504t-75.264-61.952-26.112-81.92 38.4-83.456 81.92-54.272 84.992-16.896 73.216 5.632 47.616 13.312l0-289.792q0-120.832 1.024-272.384 0-29.696 15.36-48.64t40.96-22.016q21.504-3.072 35.328 8.704t28.16 32.768 35.328 47.616 56.832 52.224q30.72 23.552 53.76 33.792t43.008 18.944 39.424 20.992 43.008 39.936q23.552 26.624 28.672 55.296t0.512 52.224-14.848 38.4-17.408 13.824z"></path></svg>
<audio ref="audioPlayer" id="audioPlayer" :src="musicUrl" controls="controls" autoplay loop="true" hidden="true" @play="handlePlay" @pause="handlePause"></audio>
</div>
</template>
<script setup>
import {defineComponent,getCurrentInstance,defineProps,defineEmits,defineExpose,ref,reactive,watch} from 'vue';defineProps({})//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } = getCurrentInstance()let musicUrl = require('@/assets/images/music.mp3') //音乐地址
let audioPlayer = ref(null) //音乐
let isPlaying = ref(false) //是否播放动画效果//播放按钮
const musicPlay = ()=>{if(isPlaying.value) {audioPlayer.value.pause()isPlaying.value = false} else {audioPlayer.value.play()isPlaying.value = true}
}//播放监听
const handlePlay = () => {isPlaying.value = true
}//暂停监听
const handlePause = () => {isPlaying.value = false
}//音乐图标是否显示(首页隐藏图标)
let isMusic = ref(false) //音乐图标是否显示
watch(()=>proxy.$router.currentRoute.value.path,(newV,oldV)=>{if(newV != '/'){isMusic.value = true}
})</script>
<style>
.music{width:4rem;height:4rem;border-radius:4rem;position:fixed;left:1rem;top:1rem;z-index:999;display:flex;align-items:center;background:#419035;justify-content:center;}
.musicPlay{animation:rotate 5s linear infinite;}
.music .icon{width:2rem;height:2rem;fill:#c3db60;}
.music audio{display:none;}
@keyframes rotate{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
</style>

App.vue(使用音乐组件)

<template><!--app.vue其他代码--><!--组件使用-->
<music-play></music-play><!--app.vue其他代码--></template>
<script setup>//引入组件
import MusicPlay from '@/components/MusicPlay.vue'</script>

index.vue(页面起始页首页)

<template>
<div><!--其他html-->
<!--注: 除app.vue引入音乐组件 其他页面均不需再引用--><div @click="goPass">点击开始</div></div>
</template>
<script setup>
import {defineComponent,getCurrentInstance,ref,reactive,computed,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated,onServerPrefetch,toRaw,watch} from 'vue';//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } = getCurrentInstance()//去开启音乐并跳转其他页
const goPass = () => {//捕获页面中的id为audioPlayer的音乐标签(MusicPlay.vue)let audioPlayer = document.getElementById('audioPlayer')//设置音乐开始播放audioPlayer.play()//跳转其他页面proxy.$router.push("/xxxxxx")
}
</script>

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

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

相关文章

Sentinel限流算法总结

文章目录 一、线程隔离二、滑动窗口算法三、令牌桶算法四、漏桶算法 一、线程隔离 线程隔离有两种方式实现&#xff1a; 线程池隔离&#xff1a;给每个服务调用业务分配一个线程池&#xff0c;利用线程池本身实现隔离效果信号量隔离&#xff1a;不创建线程池&#xff0c;而是…

Xilinx FPGA:vivado关于同步fifo的两个小实验

一、实验一&#xff1a;在同步fifo里写一个读一个&#xff08;写入是8个位宽&#xff0c;读出是16个位宽&#xff09; 程序&#xff1a; timescale 1ns / 1ps //要求写一个读一个 //读写时钟一致&#xff0c;写是8个位宽&#xff0c;读是16个位宽 module sync_fifo_test(inpu…

银行信用卡风险大数据分析与挖掘2024

银行信用卡风险大数据分析与挖掘 使用excel数据挖掘功能完成 一、信用卡客户信用等级影响因素分析与挖掘 基于客户信用记录表 1. 数据预处理 浏览数据 客户等级占比&#xff0c;其中优质客户占比较少&#xff0c;风险客户很多&#xff0c;分析影响客户信用等级的原因 年…

vue3+ts项目中.env配置环境变量与情景配置

一、环境变量配置 官网https://cn.vitejs.dev/guide/env-and-mode.html#intellisense 1. 新建.env开头的文件在根目录 为了防止意外地将一些环境变量泄漏到客户端&#xff0c;只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码 .env 所有环境默认加载 .env.developm…

数字化精益生产系统--MRP 需求管理系统

MRP&#xff08;Material Requirements Planning&#xff0c;物料需求计划&#xff09;需求管理系统是一种在制造业中广泛应用的计划工具&#xff0c;旨在通过分析和计划企业生产和库存需求&#xff0c;优化资源利用&#xff0c;提高生产效率。以下是对MRP需求管理系统的功能设…

Raylib 坐标系

draftx 符号调整为正数 发现采样坐标系原点0&#xff0c;0 在左上角&#xff0c;正方向 右&#xff0c;下 绘制坐标系 原点0&#xff0c;0 在左下角&#xff0c;正方向 右&#xff0c;上 拖拽可得 #include <raylib.h> // 重整原因&#xff1a;解决新函数放大缩小之下…

当需要对多个表进行联合更新操作时,怎样确保数据的一致性?

文章目录 一、问题分析二、解决方案三、示例代码&#xff08;以 MySQL 为例&#xff09;四、加锁机制示例五、测试和验证六、总结 在数据库管理中&#xff0c;经常会遇到需要对多个表进行联合更新的情况。这种操作带来了一定的复杂性&#xff0c;因为要确保在整个更新过程中数据…

为什么需要服务器?服务器可以做些什么

目录 一、服务器和电脑的区别二、什么是SSH三、什么是免密码登录四、服务器如何实现SSH免密码登录 一、服务器和电脑的区别 服务器和电脑是两种不同类型的计算机系统&#xff0c;它们在设计、功能和用途上存在明显的区别。首先&#xff0c;从硬件配置上看&#xff0c;服务器通…

vb.netcad二开自学笔记3:启动与销毁

Imports Autodesk.AutoCAD.ApplicationServicesImports Autodesk.AutoCAD.EditorInputImports Autodesk.AutoCAD.RuntimePublic Class WellcomCADImplements IExtensionApplicationPublic Sub Initialize() Implements IExtensionApplication.InitializeMsgBox("net程序已…

JDK都出到20多了,你还不会使用JDK8的Stream流写代码吗?

目录 前言 Stream流 是什么&#xff1f; 为什么要用Steam流 常见stream流使用案例 映射 map() & 集合 collect() 单字段映射 多字段映射 映射为其他的对象 映射为 Map 去重 distinct() 过滤 filter() Stream流的其他方法 使用Stream流的弊端 前言 当你某天看…

基于深度学习LightWeight的人体姿态检测跌倒系统源码

一. LightWeight概述 light weight openpose是openpose的简化版本&#xff0c;使用了openpose的大体流程。 Light weight openpose和openpose的区别是&#xff1a; a 前者使用的是Mobilenet V1&#xff08;到conv5_5&#xff09;&#xff0c;后者使用的是Vgg19&#xff08;前10…

公务员考试、事业编考试、教师资格证、面试、K12资料、电子书

点击上方△腾阳 关注 作者 l 腾阳 转载请联系授权 你好&#xff0c;我是腾阳。 在这个自媒体的海洋里&#xff0c;我曾是一只迷失方向的小鸟&#xff0c;多次尝试飞翔却总是跌跌撞撞。 但每一次跌倒&#xff0c;都让我更坚定地相信&#xff0c;只要不放弃&#xff0c;总…

【Unity2D 2022:Particle System】添加命中粒子特效

一、创建粒子特效游戏物体 二、修改粒子系统属性 1. 基础属性 &#xff08;1&#xff09;修改发射粒子持续时间&#xff08;Duration&#xff09;为1s &#xff08;2&#xff09;取消勾选循环&#xff08;Looping&#xff09; &#xff08;2&#xff09;修改粒子存在时间&…

2024全网最全面及最新且最为详细的网络安全技巧五 之 SSRF 漏洞EXP技巧,典例分析以及 如何修复 (上册)———— 作者:LJS

五——SSRF漏洞 EXP技巧&#xff0c;典例分析以及 如何修复 目录 五——SSRF EXP技巧&#xff0c;典例分析以及 如何修复 5.1Apache mod_proxy SSRF&#xff08;CVE-2021-40438&#xff09;的一点分析和延伸 0x01 Apache Module综述 0x02 漏洞原理分析 Apache在配置反代的后端…

Java实现登录验证 -- JWT令牌实现

目录 1.实现登录验证的引出原因 2.JWT令牌2.1 使用JWT令牌时2.2 令牌的组成 3. JWT令牌&#xff08;token&#xff09;生成和校验3.1 引入JWT令牌的依赖3.2 使用Jar包中提供的API来实现JWT令牌的生成和校验3.3 使用JWT令牌验证登录3.4 令牌的优缺点 1.实现登录验证的引出 传统…

Debezium报错处理系列之第110篇: ERROR Error during binlog processing.Access denied

Debezium报错处理系列之第110篇:ERROR Error during binlog processing. Last offset stored = null, binlog reader near position = /4 Access denied; you need at least one of the REPLICATION SLAVE privilege for this operation 一、完整报错二、错误原因三、解决方法…

微服务: Nacos部署安装与properties配置

Nacos 是阿里巴巴开源的一款用于动态服务发现、配置管理和服务管理的基础设施。Nacos 这个名称源自于 “Dynamic Naming and Configuration Service”。它主要是用于解决微服务架构中服务发现和配置管理的问题。 Nacos 单机模式的部署安装 1. 安装(Windows环境) Nacos是Java…

从入门到深入,Docker新手学习教程

编译整理&#xff5c;TesterHome社区 作者&#xff5c;Ishaan Gupta 以下为作者观点&#xff1a; Docker 彻底改变了我们开发、交付和运行应用程序的方式。它使开发人员能够将应用程序打包到容器中 - 标准化的可执行组件&#xff0c;将应用程序源代码与在任何环境中运行该代码…

InspireFace-商用级的跨平台开源人脸分析SDK

InspireFace-商用级的跨平台开源人脸分析SDK InspireFaceSDK是由insightface开发的⼀款⼈脸识别软件开发⼯具包&#xff08;SDK&#xff09;。它提供了⼀系列功能&#xff0c;可以满⾜各种应⽤场景下的⼈脸识别需求&#xff0c;包括但不限于闸机、⼈脸⻔禁、⼈脸验证等。 该S…

ubuntu22 sshd设置

专栏总目录 一、安装sshd服务 sudo apt updatesudo apt install -y openssh-server 二、配置sshd 使用文本编辑器打开/etc/ssh/sshd_config sudo vi /etc/ssh/sshd_config &#xff08;一&#xff09;配置sshd服务的侦听端口 建议将ssh的侦听端口改为7000以上的端口&#…