当前位置: 首页 > news >正文

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>

相关文章:

Vue3:全局播放背景音乐

说明&#xff1a;一个全局播放的背景音乐&#xff0c;首页无音乐无音乐图标&#xff0c;在首页互动跳转页面并开始播放音乐&#xff0c;切换页面不需暂停音乐也不会重置音乐&#xff0c;可以通过音乐图标控制暂停或播放。 MusicPlay.vue&#xff08;音乐组件&#xff09; <…...

2024年07月03日 Redis部署方式和持久化

Redis持久化方式&#xff1a;RDB和AOF&#xff0c;和混合式 RDB&#xff1a;周期备份模式&#xff0c;每隔一段时间备份一份快照文件&#xff0c;从主线程Fork一个备份线程出来备份&#xff0c;缺点是会造成数据的丢失。 AOF&#xff1a;日志模式&#xff0c;每条命令都以操作…...

成都仅需浏览器即可快速查看的数据采集监控平台!

LP-SCADA数据采集监控平台无需额外客户端&#xff0c;只需要一个标准的Web浏览器&#xff0c;用户可以迅速访问系统并开始使用&#xff0c;同时支持跨平台访问。一个用户可监控多个过程&#xff0c;多个用户可以监控同一过程&#xff0c;真正实现了数据的开放性及过程信号的透明…...

LLM - 神经网络的训练过程

1. 对于回归问题&#xff0c;用损失函数来计算预测值和真实值的差异&#xff0c;一种常用的公式是如下图所示(Mean Square Error)&#xff0c;如果损失函数的值越小说明神经网络学习越准确&#xff0c;所以神经网络训练目标是减小损失函数的值&#xff0c; 2. 对于分类问题&…...

【全网最全ABC三题完整版】2024年APMCM第十四届亚太地区大学生数学建模竞赛(中文赛项)完整思路解析+代码+论文

我是Tina表姐&#xff0c;毕业于中国人民大学&#xff0c;对数学建模的热爱让我在这一领域深耕多年。我的建模思路已经帮助了百余位学习者和参赛者在数学建模的道路上取得了显著的进步和成就。现在&#xff0c;我将这份宝贵的经验和知识凝练成一份全面的解题思路与代码论文集合…...

Python | Leetcode Python题解之第213题打家劫舍II

题目&#xff1a; 题解&#xff1a; class Solution:def rob(self, nums: List[int]) -> int:def robRange(start: int, end: int) -> int:first nums[start]second max(nums[start], nums[start 1])for i in range(start 2, end 1):first, second second, max(fi…...

揭秘数据之美:【Seaborn】在现代【数学建模】中的革命性应用

目录 已知数据集 tips 生成数据集并保存为CSV文件 数据预览&#xff1a; 导入和预览数据 步骤1&#xff1a;绘制散点图&#xff08;Scatter Plot&#xff09; 步骤2&#xff1a;添加回归线&#xff08;Regression Analysis&#xff09; 步骤3&#xff1a;分类变量分析&…...

【宠粉赠书】UML 2.5基础、建模与设计实践

为了回馈粉丝们的厚爱&#xff0c;今天小智给大家送上一套系统建模学习的必备书籍——《UML 2.5基础、建模与设计实践》。下面我会详细给大家介绍这本书&#xff0c;文末留有领取方式。 图书介绍 《UML 2.5基础、建模与设计实践》以实战为主旨&#xff0c;结合draw.io免费软件…...

Python中几个重要的集合

Python中几个重要的集合&#xff08;Collection&#xff09;类型&#xff0c;包括列表&#xff08;List&#xff09;、元组&#xff08;Tuple&#xff09;、集合&#xff08;Set&#xff09;和字典&#xff08;Dictionary&#xff09; 1. 列表&#xff08;List&#xff09; 说…...

【JS】纯web端使用ffmpeg实现的视频编辑器-视频合并

纯前端实现的视频合并 接上篇ffmpeg文章 【JS】纯web端使用ffmpeg实现的视频编辑器 这次主要添加了一个函数&#xff0c;实现了视频合并的操作。 static mergeArgs(timelineList) {const cmd []console.log(时间轴数据,timelineList)console.log("文件1",this.readD…...

解决Python用xpath爬取不到数据的一个思路

前言 最近在学习Python爬虫的知识&#xff0c;既然眼睛会了难免忍不住要实践一把。 不废话直接上主题 代码不复杂&#xff0c;简单的例子奉上&#xff1a; import requests from lxml import etreecookie 浏览器F12网络请求标头里有 user_agent 浏览器F12网络请求标头里有…...

C#面:如何把一个array复制到arrayist里

要将一个数组复制到ArrayList中&#xff0c;可以使用ArrayList的AddRange方法。以下是一个示例代码&#xff1a; int[] array { 1, 2, 3, 4, 5 }; ArrayList arrayList new ArrayList(); arrayList.AddRange(array); 在上面的代码中&#xff0c;我们首先创建了一个整数类型…...

解决前后端同一个端口跨域问题

前端起了一个代理 如果url是api开头的自动代理访问8080端口&#xff08;解决前后端端口不一致要么是前端代理&#xff0c;要么是后端加过滤器&#xff09; proxy:{/api:{target:http://localhost:8080,changeOrigin : true,// 替换去掉路径上的api// rewrite:(path)>path.r…...

《C语言》认识数据类型和理解变量

&#x1f339;个人主页&#x1f339;&#xff1a;喜欢草莓熊的bear &#x1f339;专栏&#x1f339;&#xff1a;C语言基础 目录 前言 一、数据类型的介绍 1.1 字符型 1.2 整形 1.3 浮点型 1.4 布尔类型 1.5 各种数据类型的长度 1.5.1 sizeof操作符 1.5.2 数据类型长度…...

【ARM 常见汇编指令学习 7.1 -- LDRH 半字读取指令】

请阅读【嵌入式开发学习必备专栏】 文章目录 LDRH 使用介绍LDRH&#xff08;Load Register Half-word&#xff09;总结 LDRH 使用介绍 在ARMv9架构中&#xff0c;汇编指令LDRH用于从内存中载入数据到寄存器的指令&#xff0c;下面将分别对它进行详细介绍&#xff1a; LDRH&am…...

C++期末整理

课堂笔记 构造与析构 #include <iosteam> #include <cstring> using namespace std;struct Date {int y, m, d;void setDate(int, int, int);Date(int yy, int mm, int dd) {y yy, m mm, d dd;} };class Student { private:char* name;Date birthday; public:…...

技术派Spring事件监听机制及原理

Spring事件监听机制是Spring框架中的一种重要技术&#xff0c;允许组件之间进行松耦合通信。通过使用事件监听机制&#xff0c;应用程序的各个组件可以在其他组件不直接引用的情况下&#xff0c;相互发送和接受消息。 需求 在技术派中有这样一个需求&#xff0c;当发布文章或…...

秋招突击——设计模式补充——简单工厂模式和策略模式

文章目录 引言正文简单工厂模式策略模式策略模式和工厂模式的结合策略模式解析 总结 引言 一个一个来吧&#xff0c;面试腾讯的时候&#xff0c;问了我单例模式相关的东西&#xff0c;自己这方面的东西&#xff0c;还没有看过。这里需要需要补充一下。但是设计模式有很多&…...

SwiftUI中List的liststyle样式及使用详解添加、移动、删除、自定义滑动

SwiftUI中的List可是个好东西&#xff0c;它用于显示可滚动列表的视图容器&#xff0c;类似于UITableView。在List中可以显示静态或动态的数据&#xff0c;并支持垂直滚动。List是一个数据驱动的视图&#xff0c;当数据发生变化时&#xff0c;列表会自动更新。针对List&#xf…...

PostgreSQL的系统视图pg_stats

PostgreSQL的系统视图pg_stats pg_stats 是 PostgreSQL 提供的一种系统视图&#xff0c;用于展示当前数据库中的统计信息。这些统计信息由数据库内部的自动统计过程通过 ANALYZE 命令收集&#xff0c;它们帮助查询规划器做出更好的执行决策&#xff0c;从而优化查询性能。 pg…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...