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

vue 音频播放控件封装

<template>

  <div>

    <audio

      @timeupdate="updateProgress"

      controls

      ref="audioRef"

      style="display: none"

    >

      <source :src="audioUrl" type="audio/mpeg" />

      您的浏览器不支持音频播放

    </audio>

    <div class="audio_right" v-if="audioUrl">

      <img

        v-if="audioIsPlay"

        @click="playAudio"

        class="audio_icon"

        src="@/assets/images/pause.png"

        alt="播放"

      />

      <img

        v-else

        @click="playAudio"

        class="audio_icon"

        src="@/assets/images/play.png"

        alt="暂停"

      />

      <el-slider

        class="slider_box"

        v-model="currentProgress"

        :show-tooltip="false"

        @input="handleProgressChange"

      />

      <div class="audio_time">

        <span class="audio_current">{{ audioStart }}</span>

        &nbsp;/&nbsp;

        <span class="audio_total">{{ durationTime }}</span>

      </div>

      <div class="volume">

        <div class="volume_progress" v-show="audioHuds"  @click.stop="stopEvent">

          <el-slider

            vertical

            height="100px"

            class="volume_bar"

            v-model="audioVolume"

       

相关文章:

vue 音频播放控件封装

<template> <div> <audio @timeupdate="updateProgress" controls ref="audioRef" style="display: none" > <source :src="audioUrl" type="audio/mpeg" /> 您的浏览器不支持音频播放 </audio&…...

秋招面试题记录

嵌入式软件开发 网上搜集的题目 1.Static关键词的作用&#xff1f; static 关键字有三个主要作用&#xff1a; 局部变量&#xff1a;在函数内部&#xff0c;static 局部变量只初始化一次&#xff0c;且在函数调用结束后仍然保留其值。全局变量/函数&#xff1a;在文件内部&a…...

金字塔流(Pyramid Flow): 用于生成人工智能长视频的新文本-视频开源模型

在 "生成式人工智能 "中的文本生成模型和图像生成模型大行其道之后&#xff0c;现在该是文本-视频模型大显身手的时候了&#xff0c;这个列表中的新模型就是 pyramid-flow-sd3&#xff0c;它是一个开源模型&#xff0c;用于从文本或图像生成长达 10 秒的视频&#xf…...

施磊C++ | 进阶学习笔记 | 5.设计模式

五、设计模式 文章目录 五、设计模式1.设计模式三大类型概述一、创建型设计模式二、结构型设计模式三、行为型设计模式 2.设计模式三大原则3.单例模式1.饿汉单例模式2.懒汉单例模式 4.线程安全的懒汉单例模式1.锁双重判断2.简洁的线程安全懒汉单例模式 5.简单工厂(Simple Facto…...

智绘城市地图:使用百度地图 API 实现智能定位

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

【稳定性】稳定性建设之变更管理

作者&#xff1a;京东物流 冯志文 背景 在软件开发和运维领域&#xff0c;变更管理是一个至关重要的环节。无论是对现有系统的改进、功能的增加还是修复漏洞&#xff0c;变更都是不可避免的。这些变更可能涉及到软件代码的修改、配置的调整、服务器的扩容、三方jar包的变更等等…...

c语言中字符串函数strlen,strcmp,strcpy,srtcat,strncpy,strncmp,strncat

1.strlen的使用和模拟实现 strlen 用来求字符串的长度&#xff0c;统计\0之前字符的个数。 模拟实现1&#xff1a;计数参数法 模拟实验2&#xff1a;指针方法 模拟实验3&#xff1a;递归方法 2&#xff0c;strcpy 的使用和模拟实现&#xff08;拷贝字符串&#xff09; char*…...

高级SQL技巧

高级SQL技巧涵盖了许多方面&#xff0c;包括但不限于窗口函数、递归查询、公共表表达式&#xff08;CTEs&#xff09;、子查询、集合操作、临时函数、日期时间操作、索引优化等。以下是对这些技巧的详细讲解和示例。 窗口函数 窗口函数是一种特殊的SQL函数&#xff0c;能够在…...

新大话西游图文架设教程

开始架设 1. 架设条件 新大话西游架设需要准备&#xff1a; linux 系统服务器&#xff0c;建议 CentOs 7.6或以上版本游戏源码&#xff0c;。 2. 安装宝塔面板 宝塔是一个服务器运维管理软件&#xff0c;安装命令&#xff1a; yum install -y wget && wget -O in…...

Maven 快速入门

Maven 快速入门 一、简介1、概述2、特点3、工作原理4、常用命令5、生命周期6、优缺点&#x1f388; 面试题 二、安装和配置1、安装2、环境配置3、命令测试是否安装成功4、功能配置5、idea配置本地 maven6、maven 工程依赖包查询网站 三、基于IDEA创建Maven工程1、maven 工程中的…...

OpenCV-人脸检测

文章目录 一、人脸检测流程二、关键方法三、代码示例四、注意事项 OpenCV是一个开源的计算机视觉和机器学习软件库&#xff0c;它提供了多种人脸检测方法&#xff0c;以下是对OpenCV人脸检测的详细介绍&#xff1a; 一、人脸检测流程 人脸检测是识别图像中人脸位置的过程&…...

【重磅升级】基于大数据的股票量化分析与预测系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 伴随全球经济一体化和我国经济的快速发展&#xff0c;中国股票市场对世界经济的影响力不断攀升&#xff0c;中国股市已成为全球第二大股票交易市场。在当今的金融市场中&#xff0c;股票价格的波动…...

python全栈学习记录(二十四)元类、异常处理

元类、异常处理 文章目录 元类、异常处理一、元类1.元类控制类的实例化2.属性/方法的查找顺序3.单例 二、异常处理 一、元类 1.元类控制类的实例化 类的__call__方法会在产生的对象被调用时自动触发&#xff0c;args和kwargs就是调用实例时传入的参数&#xff0c;返回值是调用…...

Golang Slice扩容机制及注意事项

Golang Slice扩容机制及注意事项&#xff1a; 在 Go语言中&#xff0c;Slice&#xff08;切片&#xff09;是一种非常灵活且强大的数据结构&#xff0c;它是对数组的抽象&#xff0c;提供了动态数组的功能。Slice 的扩容机制是自动的&#xff0c;但了解其背后的原理对于编写高…...

华为OD机试 - 猜数字 - 暴力枚举(Python/JS/C/C++ 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华为OD刷题交流群&#xff0c;…...

Flink触发器Trigger

前言 在 Flink 窗口计算模型中&#xff0c;数据先经过 WindowAssigner 分配窗口&#xff0c;然后再经过触发器 Trigger&#xff0c;Trigger 决定了一个窗口何时被 ProcessFunction 处理。每个 WindowAssigner 都有一个默认的 Trigger&#xff0c;如果默认的不满足需求&#xf…...

【操作系统的使用】Linux 系统环境变量与服务管理:设置与控制的艺术

文章目录 系统环境变量与服务管理&#xff1a;设置与控制的艺术一、系统环境变量的设置1.1 临时设置环境变量1.2 永久设置环境变量 二、服务启动类型的设置2.1 查看服务状态2.2 启动和停止服务2.3 设置服务的启动类型2.3.1 设置服务在启动时运行2.3.2 禁用服务在启动时运行2.3.…...

速盾:高防cdn配置中性能优化是什么?

高防CDN配置中的性能优化是指通过调整CDN配置以提升网站的加载速度、响应时间和用户体验。在进行性能优化时&#xff0c;需要考虑多个因素&#xff0c;包括CDN节点的选择和布置、缓存策略、缓存过期时间、预取和预加载、并发连接数和网络延迟等。 首先&#xff0c;CDN节点的选…...

Qt_软件添加版本信息

文章内容: 给生成的软件添加软件的版权等信息 #include <windows.h> //中文的话增加下面这一行 #pragma code_page(65001)VS_VERSION_INFO VERSIONINFO...

mallocfree和newdelete的区别

malloc\free和new\delete的区别 malloc/free new/delete 身份&#xff1a; 函数 运算符\关键字 返回值&#xff1a; void* 带类型的指针 参数&#xff1a; 字节个数(手动计算) 类型 自动计算字节数 处理数组&#xff1a; 手动计算数组总字节数 new 类型[数量] 扩容&#xff1…...

基于光伏出力不确定性的梯级水光互补系统短期优化调度模型及Matlab代码复现研究报告

1023-(文章复现)梯级水光互补系统最大化可消纳电量期望短期优化调度模型matlab代码 参考资料《梯级水光互补系统最大化可消纳电量期望短期优化调度模型》 文中考虑光伏出力不确定性&#xff0c;以整体可消纳电量期望最大为目标&#xff0c;提出了梯级水光互补系统的短期优化调度…...

EMI滤波器选型指南:从共模与差模噪声到实际应用场景

1. EMI滤波器的核心作用与选型挑战 刚入行那会儿&#xff0c;我负责的第一个电源项目就栽在了EMI测试上。设备一上电&#xff0c;测试仪器的曲线就像心电图发作似的疯狂跳动。当时 mentor 只说了一句&#xff1a;"去查查共模和差模的区别"。这句话成了我后来十年硬件…...

RK3128安卓5.1系统APK签名全流程:从signapk.jar到platform.pk8的保姆级教程

RK3128安卓5.1系统APK签名实战指南&#xff1a;工具获取与问题排查全解析 在嵌入式Android开发领域&#xff0c;RK3128芯片因其性价比优势被广泛应用于各类智能终端设备。当开发者需要为这类设备定制系统应用或预装APK时&#xff0c;掌握正确的签名方法至关重要。不同于普通And…...

别再只盯着find了!Linux系统隐藏文件和进程的5种“花活”与排查指南

Linux系统隐匿技术深度解析&#xff1a;从防御视角看5种高级隐藏手法与实战排查 在Linux系统安全领域&#xff0c;攻击者与防御者的博弈从未停止。当普通管理员还在使用ls和ps检查系统时&#xff0c;高级攻击者早已掌握多种隐匿技术。本文将揭示五种超越常规认知的隐藏手法&…...

终极指南:使用Legacy-iOS-Kit轻松降级、越狱和修复旧款iOS设备

终极指南&#xff1a;使用Legacy-iOS-Kit轻松降级、越狱和修复旧款iOS设备 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit …...

MCP服务器性能翻倍的秘密:基于asyncio+uvloop+Pydantic V2的轻量级模板(压测QPS达12,800+)

第一章&#xff1a;MCP服务器开发模板概述与核心价值MCP&#xff08;Model-Controller-Protocol&#xff09;服务器开发模板是一套面向协议驱动、可插拔架构的后端服务构建范式&#xff0c;专为高并发、多协议适配&#xff08;如HTTP/2、gRPC、WebSocket、MQTT&#xff09;场景…...

如何用浏览器矢量图形编辑工具提升你的设计效率?

如何用浏览器矢量图形编辑工具提升你的设计效率&#xff1f; 【免费下载链接】svgedit Powerful SVG-Editor for your browser 项目地址: https://gitcode.com/gh_mirrors/sv/svgedit 在数字设计领域&#xff0c;寻找一款既专业又便捷的矢量图形编辑工具始终是设计师和开…...

Redis未授权访问漏洞实战:从SSH公钥到反弹shell的5种利用方式详解

Redis未授权访问漏洞深度攻防&#xff1a;5种高阶利用与防御方案 Redis作为高性能键值数据库&#xff0c;其未授权访问漏洞长期位居企业安全风险Top 10。本文将突破常规教程框架&#xff0c;从攻击者视角剖析5种实战利用手法&#xff0c;同时提供企业级防御方案。不同于基础复现…...

STM32F103测风扇转速,除了输入捕获,你还可以试试这个更省资源的“数脉冲”法

STM32F103风扇测速实战&#xff1a;输入捕获与数脉冲法的资源博弈 在嵌入式开发中&#xff0c;风扇转速监测是个看似简单却暗藏玄机的任务。面对STM32F103这类资源有限的Cortex-M3内核单片机&#xff0c;如何在保证功能的前提下最大化硬件利用率&#xff1f;传统输入捕获法虽精…...

5步打造Android Studio中文界面配置:从基础设置到效率倍增的本地化环境方案

5步打造Android Studio中文界面配置&#xff1a;从基础设置到效率倍增的本地化环境方案 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack…...