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

vue动态修改audio地址

news 2026/2/10 6:45:16

问题：点击后替换url地址，实现了，但是播放器依旧没有反应。

解决：vue中动态替换只是替换了地址，并没有告诉audio标签是否要执行，执行什么操作。要load后才能让它知道，是在喊他，他需求进行操作了！

页面设计用的是element

点击试听的时候弹出效果，点击x的时候，关闭音乐。

 

代码

        <transition name="el-zoom-in-bottom"><div class="mp3Audio" v-show="mp3Audio"><div class="audioClose" @click="closeAudio"><i class="el-icon-close"></i></div><div class="mp3Name">{{mp3Name}}</div><audio controls="controls" ref="audioRef"><source :src="mp3Url" type="audio/mp3"/><source :src="mp3Url" type="audio/ogg"/>Your browser does not support this audio format.</audio></div></transition>

 

            // 点击试听，绑定地址，dom，自动播放handleListen(row) {console.log(row);this.mp3Name = row.ptitlethis.mp3Url = row.purlthis.mp3Audio = trueconst audioRef = this.$refs.audioRefaudioRef.load()audioRef.play()},// 关闭播放器closeAudio() {const audioRef = this.$refs.audioRefaudioRef.pause()this.mp3Name = ""this.mp3Url = ""this.mp3Audio = false},

相关文章：

vue动态修改audio地址

问题&#xff1a;点击后替换url地址&#xff0c;实现了&#xff0c;但是播放器依旧没有反应。 解决&#xff1a;vue中动态替换只是替换了地址&#xff0c;并没有告诉audio标签是否要执行&#xff0c;执行什么操作。要load后才能让它知道&#xff0c;是在喊他&#xff0c;他需求…...

编程日记 2023/8/18 14:40:30

CF113A Grammar Lessons 题解

一道模拟题。 题目传送门 题目意思&#xff1a; 给你一个句子&#xff0c;让你检查这个句子的语法是否正确。&#xff08;语法请自行在题目中查看&#xff09; 思路&#xff1a; 就是模拟。依次判断这个句子是否符合每一条语法即可。但是细节很多就因为细节我错了好多次&…...

编程日记 2023/8/18 14:39:30

puzzle（0414）六边形拼图

目录 六边形拼图 简单 中等 困难 六边形拼图 taptap小游戏 简单 &#xff08;3&#xff09; &#xff08;4&#xff09; 中等 &#xff08;3&#xff09; &#xff08;4&#xff09; 困难 &#xff08;2&#xff09; &#xff08;3&#xff09; &#xff08;4&#xff…...

编程日记 2023/8/18 14:38:26

回归预测 | MATLAB实现基于SAE堆叠自编辑器多输入单输出回归预测

回归预测 | MATLAB实现基于SAE堆叠自编辑器多输入单输出回归预测 目录 回归预测 | MATLAB实现基于SAE堆叠自编辑器多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于SAE堆叠自编辑器多输入单输出回归预测&#xff1b; 2.运行环…...

编程日记 2023/8/18 14:37:24

BEV感知实时构建路口拓扑 觉非科技基于MapTR的优化与实践

近期&#xff0c;觉非科技通过在车端与路端的大规模数据积累&#xff0c;基于MapTR&#xff08;Map TRansformer&#xff09;方法提出了创新与优化&#xff1a;①对车道信息的表达方式进行优化&#xff0c;并简化了模型结构&#xff1b;②在MapTR的基础上加入了地图先验信息&am…...

编程日记 2023/8/18 14:36:23

如何在TikTok“点火”？用时下最流行的工具解码赚钱

抖音电商飞速发展到今天&#xff0c;训练出一帮极具紧张感、高效性&#xff0c;和“数据特征”凸显的电商从业者。 注意&#xff0c;这里的"数据特征"不单单是数据分析、数据导向那么简单&#xff0c;而是被竟对、平台、市场的现实教育出来的“数据工具意识”。 “…...

编程日记 2023/8/18 14:35:21

set NOCOUNT on

SET NOCOUNT ON 是一条 SQL 语句&#xff0c;用于禁止在执行查询时返回受影响的行数消息。通常&#xff0c;当执行 INSERT、UPDATE、DELETE 等操作时&#xff0c;数据库会返回一个消息&#xff0c;表示受影响的行数。但在某些情况下&#xff0c;你可能希望禁用这些消息&#xf…...

编程日记 2023/8/18 14:34:19

垃圾回收机制

什么是内存泄漏&#xff1f; 内存泄漏是指程序中已经不再使用的内存却没有被正确释放或回收的情况。在编程中&#xff0c;当对象或数据不再被程序使用&#xff0c;但其所占用的内存空间没有被垃圾回收机制回收&#xff0c;就会导致内存泄漏。 内存泄漏可能会导致程序的内存消…...

编程日记 2023/8/18 14:33:15

Golang 程序性能优化利器 PGO 详解（一）：简单介绍及使用

在软件开发过程中&#xff0c;性能优化是不可或缺的一部分。无论是在Web服务、数据处理系统还是实时通信中&#xff0c;良好的性能都是至关重要的。Golang 从1.20版版本开始引入的 Profile Guided Optimization&#xff08;PGO&#xff09;机制能够帮助更好地优化 Go 程序的性能…...

编程日记 2023/8/18 14:32:13

redis key操作的相关命令

目录 1、del key 2、dump key 3、exists key 4、expire key seconds 5、expireat key timestamp 6、pexpire key milliseconds 7、pexpireat key milliseconds-timestamp 8、keys pattern 9、move key db …...

编程日记 2023/8/18 14:31:11

WebRTC | 网络传输协议RTP与RTCP

目录 一、UDP与TCP 1. TCP 2. UDP 二、RTP 1. RTP协议头 &#xff08;1&#xff09;V&#xff08;Version&#xff09;字段 &#xff08;2&#xff09;P&#xff08;Padding&#xff09;字段 &#xff08;3&#xff09;X&#xff08;eXtension&#xff09;字段 &#x…...

编程日记 2023/8/18 14:30:10

160. 相交链表

题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交**&#xff1a;** 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函…...

编程日记 2023/8/18 14:29:08

【MFC】12.双缓冲序列化机制-笔记

双缓冲 双缓冲在之前写字符雨的时候&#xff0c;已经简单介绍过&#xff0c;今天我们来写一个简单的程序来体会双缓冲机制 我们实现一个在屏幕上画直线的功能&#xff1a; 在类中添加变量&#xff0c;保存起点坐标和终点坐标&#xff1a; //定义一个容器&#xff0c;保存每…...

编程日记 2023/8/18 14:28:05

Linux 终端会话中，启动任务并放到后台运行

一、需求 linux要执行一个脚本&#xff0c;耗时很长&#xff0c;想要脚本在后台运行&#xff0c;用户注销或终端软件关闭时也可以继续运行。 二、实现 1、nohup命令 脚本在后台运行 nohup 是在 Linux 和类 Unix 系统中使用的一个命令&#xff0c;用于在后台运行程序&#x…...

编程日记 2023/8/18 14:27:04

软考笔记——10.项目管理

进度管理 进度管理就是采用科学的方法&#xff0c;确定进度目标&#xff0c;编制进度计划和资源供应计划&#xff0c;进行进度控制&#xff0c;在与质量、成本目标协调的基础上&#xff0c;实现工期目标。 具体来说&#xff0c;包括以下过程&#xff1a; (1) 活动定义&#…...

编程日记 2023/8/18 14:26:03

算法与数据结构（二十四）最优子结构原理和 dp 数组遍历方向

注&#xff1a;此文只在个人总结 labuladong 动态规划框架&#xff0c;仅限于学习交流&#xff0c;版权归原作者所有&#xff1b; 本文是两年前发的 动态规划答疑篇open in new window 的修订版&#xff0c;根据我的不断学习总结以及读者的评论反馈&#xff0c;我给扩展了更多…...

编程日记 2023/8/18 14:25:00

Java Vue Uniapp MES生产执行管理系统

本MES系统是一款B/S结构、通用的生产执行管理系统&#xff0c;功能强大&#xff01; 系统基于多年离散智造行业的业务经验组建&#xff0c;主要目的是为国内离散制造业的中小企业提供一个专业化、通用性、低成本的MES系统解决方案。 联系作者获取...

编程日记 2023/8/18 14:23:59

深入探究Socks5代理与IP代理在网络安全与爬虫中的应用

1. Socks5代理&#xff1a;打开网络隧道的多功能工具 Socks5代理是一种流行的代理协议&#xff0c;它在传输层为数据包提供了隧道。相较于之前的版本&#xff0c;Socks5不仅支持TCP连接&#xff0c;还可以处理UDP流量&#xff0c;使其在需要实时数据传输的应用中表现出色。在网…...

编程日记 2023/8/18 14:22:57

Vue使用jspdf和html2canvas组件库结合导出PDF文件

效果图&#xff1a; 1、安装依赖&#xff1a; npm install html2canvas --save npm install jspdf --save 或 yarn add html2canvas --save yarn add jspdf --save 2、封装全局调用方法&#xff1a;this.$exportPDF(#id,文件名) 新建js文件&#xff1a;/utils/html2Pdf.js&am…...

编程日记 2023/8/18 14:21:54

7. 实现 API 自动生成

目录 1. pom.xml中引用依赖 2. 引入相关的依赖 3. 编写配置类 4. application.yml 中添加配置 5. API 常用注解 6. 访问 API 列表 7. API 导入 Postman 使用 Springfox Swagger生成 API&#xff0c;并导入 Postman&#xff0c;完成API单元测试。 Swagger 简介&#xff1a;Swag…...

编程日记 2023/8/18 14:20:53

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2026/1/23 10:24:30

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/2/8 21:57:26

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/31 6:12:22

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

编程新知 2026/2/8 22:30:28

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

编程新知 2026/2/6 5:51:39

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...

编程新知 2026/2/8 4:36:58