vue3项目引入本地js文件,实现一个音频播放按钮

目前有一个需求就是在网页上放置一个音乐控制按钮,并且是在vue3项目里面。于是小白的我遇到了2个问题,第一个问题是如何实现没有进度条的播放按钮,这个网上有现成的代码,可以通过js代码切换不同的图片或者是别的样式,并不算难;第二个问题是如何在vue3项目中引入js文件,这个给刚刚接触vue3的我带来了一点麻烦。好在经过几个小时的研究终于解决了,下面给出具体解决方案:

首先声明这个功能只涉及了我的3个页面,一个是vue组件,另一个就是自建的本地js文件,还有一个就是vue项目自带的index.html文件。

首先在index.vue组件中,写入如下代码:

<button id="bgm-control" onclick="bgm_control()"><span id="off" style="display: flex" >BGM OFF</span><svg t="1707990489554" id="icon-pause" style="display: flex" viewBox="-200 50 1500 900" version="1.1"xmlns="http://www.w3.org/2000/svg" p-id="1612" width="15" height="15"><path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" fill="#ffffff" p-id="1613"></path><pathd="M744.055658 192.799074c-4.814656-2.889817-9.601682-5.251607-15.442714-5.251607-14.262842 0-25.758664 11.559267-25.758664 25.805736 0 10.285251 6.088672 18.519796 14.6957 23.195282 94.679359 55.247278 158.344355 157.787676 158.344355 275.30416 0 117.424386-63.605643 219.931015-158.159136 275.18034-8.29492 4.538363-15.442714 13.050224-15.442714 23.583115 0 14.261818 11.559267 25.820062 25.791409 25.820062 5.716188 0 10.252505-2.202155 15.22475-5.063319 109.871363-64.133669 183.764304-183.143157 183.764304-319.520197C927.074995 375.785665 853.495186 257.010515 744.055658 192.799074z"fill="#ffffff" p-id="1614"></path><pathd="M773.946432 511.867994c0-79.96524-43.344181-149.739373-107.821681-187.289594-2.920516-1.52268-9.785877-4.520967-14.603603-4.520967-14.325263 0-25.914206 11.589966-25.914206 25.89988 0 9.616008 5.096065 18.176988 12.865006 22.666232 49.839105 28.307719 83.45983 81.829703 83.45983 143.244448 0 62.472843-34.801621 116.817566-86.070284 144.750755-7.457856 4.538363-12.397355 12.803607-12.397355 22.188348 0 14.325263 11.588943 25.943882 25.882484 25.943882 6.090718 0.031722 13.33061-3.542686 13.33061-3.542686C729.048873 664.171772 773.946432 593.294514 773.946432 511.867994z"fill="#ffffff" p-id="1615"></path><pathd="M541.3694 124.672464c-10.846022-5.219885-23.740704-3.790326-33.215496 3.712555-0.435928 0.358157-46.423309 36.914748-97.195669 74.296123-88.308255 65.081251-114.036219 75.925227-119.257128 77.649498l-110.6194 0c-0.63752 0-1.243317 0.062422-1.879813 0.093121l-56.504922 0c-14.231119 0-25.775037 11.543917-25.775037 25.775037l0 411.697573c0 14.261818 11.512195 25.761734 25.775037 25.761734l189.511191 0.027629c5.096065 1.865487 29.395494 13.0799 107.761306 76.999698 45.613874 37.162388 86.505189 73.485665 86.940095 73.829496 5.841032 5.218862 13.298887 7.92039 20.820188 7.92039 4.349051 0 8.729825-0.930185 12.862959-2.764973 11.277858-5.064342 18.517749-16.252149 18.517749-28.619828 0 0 0.031722-97.257068 0.031722-132.212184 0.808412-2.484587 1.213641-5.127787 1.213641-7.863085 0-2.792603-1.245364-578.026786-1.245364-578.026786C559.110459 140.892891 552.214399 129.924071 541.3694 124.672464zM508.308423 726.470653c0 1.494027-0.467651 94.617961-0.467651 94.617961-13.889335-11.745509-29.332049-24.64019-45.240367-37.507242-104.59008-84.702124-130.505309-91.816149-148.030451-91.816149-0.372483 0-0.683569 0.091074-1.025353 0.091074s-0.652869-0.091074-1.025353-0.091074L170.394297 691.765223c-18.037818 0-22.248723-5.128811-22.248723-23.246447L148.145573 352.559685c0-12.32163 1.461281-20.057825 16.298198-20.057825l128.065747 0c17.090237 0 43.315528-6.991228 157.787676-90.839915 20.383236-14.914688 40.330544-29.938869 57.544601-43.113937 0 0 0.373507 445.207781 0.467651 521.368368C507.779374 722.028481 508.308423 724.234729 508.308423 726.470653z"fill="#ffffff" p-id="1616"></path></svg><span id="on" style="display: none;">BGM ON</span><svg t="1707990489554" id="icon-play" style="display: none" viewBox="-200 50 1500 900" version="1.1"xmlns="http://www.w3.org/2000/svg" p-id="1612" width="15" height="15"><path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" fill="#ffffff" p-id="1613"></path><pathd="M744.055658 192.799074c-4.814656-2.889817-9.601682-5.251607-15.442714-5.251607-14.262842 0-25.758664 11.559267-25.758664 25.805736 0 10.285251 6.088672 18.519796 14.6957 23.195282 94.679359 55.247278 158.344355 157.787676 158.344355 275.30416 0 117.424386-63.605643 219.931015-158.159136 275.18034-8.29492 4.538363-15.442714 13.050224-15.442714 23.583115 0 14.261818 11.559267 25.820062 25.791409 25.820062 5.716188 0 10.252505-2.202155 15.22475-5.063319 109.871363-64.133669 183.764304-183.143157 183.764304-319.520197C927.074995 375.785665 853.495186 257.010515 744.055658 192.799074z"fill="#ffffff" p-id="1614"></path><pathd="M773.946432 511.867994c0-79.96524-43.344181-149.739373-107.821681-187.289594-2.920516-1.52268-9.785877-4.520967-14.603603-4.520967-14.325263 0-25.914206 11.589966-25.914206 25.89988 0 9.616008 5.096065 18.176988 12.865006 22.666232 49.839105 28.307719 83.45983 81.829703 83.45983 143.244448 0 62.472843-34.801621 116.817566-86.070284 144.750755-7.457856 4.538363-12.397355 12.803607-12.397355 22.188348 0 14.325263 11.588943 25.943882 25.882484 25.943882 6.090718 0.031722 13.33061-3.542686 13.33061-3.542686C729.048873 664.171772 773.946432 593.294514 773.946432 511.867994z"fill="#ffffff" p-id="1615"></path><pathd="M541.3694 124.672464c-10.846022-5.219885-23.740704-3.790326-33.215496 3.712555-0.435928 0.358157-46.423309 36.914748-97.195669 74.296123-88.308255 65.081251-114.036219 75.925227-119.257128 77.649498l-110.6194 0c-0.63752 0-1.243317 0.062422-1.879813 0.093121l-56.504922 0c-14.231119 0-25.775037 11.543917-25.775037 25.775037l0 411.697573c0 14.261818 11.512195 25.761734 25.775037 25.761734l189.511191 0.027629c5.096065 1.865487 29.395494 13.0799 107.761306 76.999698 45.613874 37.162388 86.505189 73.485665 86.940095 73.829496 5.841032 5.218862 13.298887 7.92039 20.820188 7.92039 4.349051 0 8.729825-0.930185 12.862959-2.764973 11.277858-5.064342 18.517749-16.252149 18.517749-28.619828 0 0 0.031722-97.257068 0.031722-132.212184 0.808412-2.484587 1.213641-5.127787 1.213641-7.863085 0-2.792603-1.245364-578.026786-1.245364-578.026786C559.110459 140.892891 552.214399 129.924071 541.3694 124.672464zM508.308423 726.470653c0 1.494027-0.467651 94.617961-0.467651 94.617961-13.889335-11.745509-29.332049-24.64019-45.240367-37.507242-104.59008-84.702124-130.505309-91.816149-148.030451-91.816149-0.372483 0-0.683569 0.091074-1.025353 0.091074s-0.652869-0.091074-1.025353-0.091074L170.394297 691.765223c-18.037818 0-22.248723-5.128811-22.248723-23.246447L148.145573 352.559685c0-12.32163 1.461281-20.057825 16.298198-20.057825l128.065747 0c17.090237 0 43.315528-6.991228 157.787676-90.839915 20.383236-14.914688 40.330544-29.938869 57.544601-43.113937 0 0 0.373507 445.207781 0.467651 521.368368C507.779374 722.028481 508.308423 724.234729 508.308423 726.470653z"fill="#ffffff" p-id="1616"></path></svg></button>

然后自建一个js文件,写入如下函数:

function bgm_control() {var music = document.getElementById('music');var off = document.getElementById("off");var icon_pause = document.getElementById("icon-pause");var on = document.getElementById("on");var icon_play = document.getElementById("icon-play");if (music.paused) {music.play();off.style.display = "none";icon_pause.style.display = 'none'on.style.display = "flex";icon_play.style.display = 'flex'} else {music.pause();on.style.display = "none";icon_play.style.display = 'none'off.style.display = 'flex';icon_pause.style.display = 'flex';}
}

最后一步是在index.html文件引入js文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script><script src="src/assets/js/bgm_control.js"></script></body>
<style>*{margin: 0;padding: 0;}body,html{margin: 0;padding: 0;}
</style>
</html>

实现效果

按钮效果展示

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

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

相关文章

SpringBoot-将Bean放入容器的五种方式

1、Configuration Bean Configuration public class MyConfiguration {Beanpublic Person person() {Person person new Person();person.setName("spring");return person;} } 2、Componet ComponentScan Component public class Person {private String name;pu…

SparkSQL学习02-编程入口

文章目录 1 DataFrame的构建方式方式一&#xff1a;JavaBean反射的方式1.1 创建Scala类1.2 创建Scala对象 方式二&#xff1a;动态编码的方式 2 DataSet的构建方式3 RDD和DataFrame以及DataSet之间的相互转换3.1【RDD-->DataFrame】和【RDD-->DataSet】3.2【DataFrame--&…

java基础之 SPI机制

SPI机制说明 什么是SPI Service Provider Interface 机制是Java提供的一套用来被第三方实现或扩展的API&#xff0c;他可以用来启用框架扩展和替换组件。通过“基于接口的编程 策略模式 配置文件”组合实现的动态加载机制。SPI机制为某个接口寻找服务实现的机制&#xff0c;…

二叉树基础知识总结

目录 二叉树基础知识 概念 : 根节点的五个形态 : 特殊的二叉树 满二叉树 : 完全二叉树 : 二叉搜索树 : 平衡二叉搜索树 : 二叉树的性质 : 二叉树的存储结构 二叉树的顺序存储结构 二叉树的链式存储结构 二叉树的遍历方式 : 基础概念 前中后遍历 层序遍历 :…

【Redis】理论进阶篇------浅谈Redis的缓存穿透和雪崩原理

一、缓存穿透 1、概念 缓存穿透&#xff08;查不到数据&#xff09;&#xff0c;是指当用户想要查询数据的时候&#xff0c;会先去Redis中取命中&#xff0c;如果Redis中没有该数据&#xff0c;那么就会向数据库中去查找数据。如果数据库中也没有&#xff0c;则该次查询结果失…

Hive 最全面试题及答案(基础篇)

基本知识 hive元数据存储 Hive 元数据存储了关于表、分区、列、分桶等信息。 在生产环境中,通常会将 Hive 的元数据存储在外部的关系型数据库中,如 MySQL 或 PostgreSQL。这样可以提供更好的性能、可扩展性和容错性。通过配置 Hive 的元数据存储为 MySQL 或 PostgreSQL,可以…

Spring学习笔记(五)--Spring的AOP模块

一、AOP的底层原理 AOP的底层原理是动态代理&#xff0c;动态代理有两种方式&#xff1a;JDK动态代理和CGLib动态代理&#xff0c;在有接口的实现类时我们通常用JDK的动态代理方式&#xff08;默认情况&#xff09;为类创建代理对象&#xff0c;JDK的动态代理方式可以实现无入…

ORM中常用的字段和参数,正反向概念

django表查询测试环境搭建 首先&#xff0c;在此之前我们先来回顾一下之前学习的orm内容 1. django自带一个小型的sqlite3的小型数据库 但是这个数据库的功能非常有限&#xff0c;并且针对日期类型的数据兼容性很差 2. 切换数据库数据(MySQL) 2.1 在django1.x版本中你需要在_…

Android TextView.setText() 引发的卡顿问题

在 Android 开发中&#xff0c;TextView 是一个非常基础和常用的用户界面组件&#xff0c;用于在屏幕上显示文本内容。TextView 继承自 View 类&#xff0c;并提供了展示文本以及相关样式处理的功能。 TextView 允许开发者在应用程序的用户界面中显示格式化的文本内容。它支持…

PotPlayer+Alist挂载并播放网盘视频

文章目录 说明技术WebDAVPotPlayer 操作步骤一&#xff1a;Alist开启WebDAV代理二&#xff1a;PotPlayer连接Alist 说明 Alist网页端播放视频受限&#xff0c;主要是文件大于20MB&#xff0c;由于官方限制&#xff0c;无法播放需要使用user-agent修改插件&#xff0c;设置百度…

html中如何给input输入框这个一个默认值

在HTML中&#xff0c;要给<input>输入框设置一个默认值&#xff0c;你可以使用value属性。下面是一个简单的例子&#xff0c;展示了如何为一个文本输入框设置一个默认值&#xff1a; <input type"text" value"这是默认值">在这个例子中&#…

《最新出炉》系列初窥篇-Python+Playwright自动化测试-24-处理单选和多选按钮-上篇

1.简介 在工作和生活中&#xff0c;经常会遇到我们需要进行选择的情况&#xff0c;比如勾选我们选择性别&#xff0c;男女两个性别总是不能同时选中的&#xff0c;再比如我们在选择兴趣爱好时&#xff0c;我们可以选择多个自己感兴趣的话题&#xff0c;比如&#xff1a;篮球、…

sqllabs第46关 order by 注入

简介&#xff1a;&#xff08;order by注入-错误回显-POST注入&#xff09; 请求方法&#xff1a;POST 方法&#xff1a;order by注入错误回显数字型注入 先了解下 order by参数注入&#xff1a; order by 注入是指其后面的参数是可控的&#xff0c; order by 不同于我们在 whe…

gem5学习(23):经典缓存——Classic Caches

目录 一、Interconnects 1、Crossbars 二、Debugging 官网教程&#xff1a;gem5: Classic caches 默认缓存是一个带有MSHR&#xff08;未命中状态保持寄存器&#xff09;和WB&#xff08;写缓冲区&#xff09;的非阻塞缓存&#xff0c;用于读取和写入未命中。缓存还可以启用…

6.3 存储卡

本节介绍Android的文件存储方式--在存储卡上读写文件&#xff0c;包括&#xff1a;公有存储空间与私有存储空间有什么区别&#xff0c;如何利用存储卡读写文本文件&#xff0c;如何利用存储卡读写图片文件&#xff0c;如何在App运行的时候动态申请权限等。 6.3.1 私有存储空间…

Android应用图标防止被系统缩放问题

问题 Launcher显示应用的图标时可能有一定程度的缩放和剪裁后剧中&#xff0c;可能导致我们应用的图标看起来过小。 解决方法 在icon资源中用xml去放置资源ic_launcher.xml&#xff0c;不要直接使用png&#xff0c;然后把自己的资源放在xml中的foreground 标签中。 <appli…

关于Linux搭建DedeCMS说明

使用环境 1. Ubuntu 22.042. PhP 4.0 3. nginx4. MySQL 5.7软件安装 安装nginx #1. 更新系统 sudo apt update && sudo apt upgrade -y#2. 安装nginx sudo apt install nginx -y安装MySQL apt list -a mysql-server安装 PHP 7.4 使用 ondrej/php PPA sudo apt inst…

[java基础揉碎]this

引出this: 什么是this: java虚拟机会给每个对象分配 this&#xff0c;代表当前对象。 这里的this就是new出来的这个对象 this的本质: this是个引用在堆中指向它自己: this的细节: 访问成员方法: 访问构造器:

精英ECS Z97-MACHINE V1.0 BIOS MX25L6406E

官网上的两个BIOS我都无法亮机&#xff0c;这是我保存出来的BIOS&#xff0c;不知道是否能使用五代的处理器 官网&#xff1a;Z97-MACHINE&#xff5c;Motherboard&#xff5c;产品&#xff5c;ECS 精英电脑 国外老哥的看法&#xff1a;ECS Z97-MACHINE Closer Look: The BIO…

Postgresql源码(121)事务状态中childXids的作用

总结 PG的子事务回滚是真回滚&#xff08;直接回滚了&#xff0c;不管顶层事务提交还是回滚&#xff09;。 PG的子事务提交是假提交&#xff08;子事务提交后会把决定权交给顶层事务&#xff0c;随顶层事务提交、回滚&#xff09;。 子事务提交后&#xff0c;将xid记录到父事…