mp3的播放

news2025/2/25 6:18:49

1.这段vue代码会播放声音,但是会有audio标签

<template>
  <div>
    <audio id="myAudio" controls>
      <source src="./test.mp3" type="audio/mp3" />
      Your browser does not support the audio tag.
    </audio>
  </div>
</template>
<script>
export default {
  mounted() {
    // 播放
    var audio = document.getElementById("myAudio");
    audio.play();
  }
}
</script>

2.只有不会显示video标签的播放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Play MP3 on Button Click</title>
</head>
<body>

<button id="playButton">Play MP3</button>
<script>
  // 创建 Audio 对象
  const audio = new Audio('./test.mp3');
  // 获取按钮元素
  const playButton = document.getElementById('playButton');
  // 点击按钮时播放音频
  playButton.addEventListener('click', function() {
    audio.play();
  });
</script>

</body>
</html>

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

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

相关文章

webGL开发科学模拟

开发科学模拟应用涉及到使用 WebGL 进行高性能的图形渲染&#xff0c;同时结合科学计算和模拟算法。以下是一般的技术方案&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.WebGL 框架&#xff1a; …

C/C++,数字序列——查找第n个鲍姆甜序列(Baum Sweet Sequence)的计算方法与源程序

1 文本格式 // CPP code to find the nth term of the Baum Sweet Sequence #include <bits/stdc.h> using namespace std; int nthBaumSweetSeq(int n) { // bitset stores bitwise representation bitset<32> bs(n); // len stores the number of bits…

【云原生 | Docker】Docker核心概念 应用上手最佳流程

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

基因组变异注释 — ANNOVAR(一)

基因组变异注释 — ANNOVAR&#xff08;一&#xff09; 1 简介 ANNOVAR 是一款高效的基因组注释工具&#xff0c;专门用于分析和注释来自多种生物基因组&#xff08;包括人类的 hg18、hg19、hg38&#xff0c;以及小鼠、蠕虫、果蝇、酵母等&#xff09;的遗传变异。这个工具实际…

数字营销竞争激烈,这是真的吗?

使用互联网、社交媒体、搜索引擎、移动设备和其他数字渠道等数字技术来营销和销售商品或服务称为数字营销。使用各种策略和策略来接触目标受众并与之互动、提高品牌知名度、产生潜在客户并推动转化。 如今&#xff0c;借助智能手机和其他数字设备&#xff0c;企业可以更轻松地…

在Windows操作系统上使用rtsp simple server和ffmpeg推送录屏视频流

大纲 1 搭建启动rtsp server2 推送录屏视频流下载FFmpeg 3 检验3.1 获取本机IP3.2 检测 1 搭建启动rtsp server 从https://github.com/aler9/rtsp-simple-server/releases下载Windows版本的编译结果。 解压&#xff0c;然后启动该程序 2 推送录屏视频流 下载FFmpeg 从htt…

C语言数组(下)

我希望各位可以在思考之后去看本期练习&#xff0c;并且在观看之后独立编写一遍&#xff0c;以加深理解&#xff0c;巩固知识点。 练习一&#xff1a;编写代码&#xff0c;演⽰多个字符从两端移动&#xff0c;向中间汇聚 我们依旧先上代码 //编写代码&#xff0c;演⽰多个字…

学习数分--简单案例1

业务背景&#xff1a;某服务类app&#xff0c;近期发现日新增用户数下滑明显。 具体描述&#xff1a;假设公司产品&#xff08;一款本地服务类app&#xff09;&#xff0c;近期发现日新增用户数下滑明显。老板要求你分析&#xff1a;数据异动的原因是什么&#xff1f; #最开始…

烤鱼纸包鱼外卖配送小程序商城作用是什么

烤鱼、纸包鱼等餐品是聚会、娱乐、餐食等场景中常见的餐品&#xff0c;到店和外送都有较高需求度&#xff0c;对消费者来说需要找到美味的餐厅和快速享受到美食的流程&#xff1b;对商家来说是如何找到更多消费&#xff0c;并且能快速转化和持续复购及相应的管理。 线下竞争激…

【面试经典150 | 二叉树】相同的树

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;递归方法二&#xff1a;迭代 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题…

前端时间的失败总结复盘

分享失败经验&#xff0c;前段时间的总结复盘&#xff1a; 与伙伴合作面对异常决策要及时提出质疑&#xff0c;怼&#xff0c;别太客气&#xff0c;客气起来&#xff0c;小心翼翼在意他人情绪那么这个项目就会让人难受&#xff0c;不要因为因为伙伴身上有标签/光环/权威就觉得…

【带头学C++】----- 九、类和对象 ---- 9.4 拷贝构造函数、赋值

目录 9.4 拷贝构造函数、赋值 9.4.1 定义拷贝构造函数 9.4.2 拷贝构造和无参构造、有参构造的关系 9.4.3 拷贝构造的几种调用形式 1、旧对象给新对象初始化&#xff0c;调用拷贝构造 2、给对象取别名不会调用拷贝构造 3、普通对象作为函数参数&#xff0c;调用函数时会发…

MicroPython标准库

MicroPython标准库 arraybinascii(二进制/ASCII转换)builtins – 内置函数和异常cmath – 复数的数学函数collections – 集合和容器类型errno – 系统错误代码gc – 控制垃圾收集器hashlib – 散列算法heapq – 堆队列算法io – 输入/输出流json – JSON 编码和解码math – 数…

「Verilog学习笔记」时钟分频(偶数)

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule even_div(input wire rst ,input wire clk_in,output wire clk_out2,output wire clk_out4,output wire clk_out8); //********…

WebSocket入门介绍及编程实战

HTTP的限制 全双工和半双工&#xff1a; 全双工&#xff1a;全双工&#xff08;Full Duplex&#xff09;是允许数据在两个方向上同时传输。 半双工&#xff1a;半双工&#xff08;Half Duplex&#xff09;是允许数据在两个方向上传输&#xff0c;但是同一个时间段内只允许一个…

在AWS Lambda中使用FFmpeg处理m3u8视频流

大纲 1 部署有FFmpeg功能的Lambda环境1.1 部署层1.2 部署代码1.2.1 FFmpeg指令1.2.2 代码 2 配置Lambda角色权限2.1 选择角色类型2.2 设置权限2.3 保存角色2.4 绑定角色 参考文献 在直播里领域&#xff0c;我们经常需要对视频流进行处理。FFmpeg则是该领域中处理的利器。这篇文…

GS016电动工具调速控制电路芯片,7V ~ 24V 7mA ~ 10mA具 有电源电压范围宽、功耗小、抗干扰能力强等特点

GS016是一款直流有刷电机调速电路&#xff0c;输出端内置14V钳位结构&#xff0c;具 有电源电压范围宽、功耗小、抗干扰能力强等特点。通过桥接内部电阻网 络&#xff0c;可以改变PWM占空比输出&#xff0c;达到控制电机转速作用。采用SOP14的封装形式封装。 主要特点&#xf…

蓝桥杯每日一题2023.12.5

题目描述 1.一步之遥 - 蓝桥云课 (lanqiao.cn) 题目分析 对于本题遵循多了就减少了就加的原则&#xff0c;用while进行计算即可 #include<bits/stdc.h> using namespace std; int x, ans; int main() {while(x ! 1){if(x < 1)x 97;else x - 127;ans ;}cout <&…

vue2+electron桌面端一体机应用

vue2+electron项目 前言:公司有一个项目需要用Vue转成exe,首先我使用vue-cli脚手架搭建vue2项目,然后安装electron 安装electron 这一步骤可以省略,安装electron-builder时会自动安装electron npm i electron 安装electron-builder vue add electron-builder 项目中多出…

【云原生-K8s】检查yaml文件安全配置kubesec部署及使用

基础介绍基础描述特点 部署在线下载百度网盘下载安装 使用官网样例yamlHTTP远程调用安全建议 总结 基础介绍 基础描述 Kubesec 是一个开源项目&#xff0c;旨在为 Kubernetes 提供安全特性。它提供了一组工具和插件&#xff0c;用于保护和管理在 Kubernetes 集群中的工作负载和…