mp3的播放

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.mzph.cn/news/208037.shtml

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

相关文章

ubuntu22.04安装过程记录

安装双系统ubuntu22.04 【双系统】如何安装ubuntu22.04系统_ubuntu安装教程-CSDN博客 更换清华源 打开清华源官网&#xff0c;搜索对应系统版本的镜像源码 https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/ 原文件备份 sudo cp /etc/apt/sources.list /etc/apt/source…

库卡LBR_iisy_3_R760协作机器人导入到coppeliasim

1.从库卡官网xpert下载模型 一般载都是这个step文件格式&#xff0c;其他的好像不太好用。coppeliasim导入格式用的是stl,需要用freeCAD打开重新转换一下。下载下来后&#xff0c;很多都是一个整体&#xff0c;在freeCAD导入中&#xff0c;导入选择要不勾选合并。 下载完用CAD …

正则表达式详细讲解

目录 一、正则表达式概念 二、八元素 1、普通字符&#xff1a; 2、元字符&#xff1a; 3、通配符 .&#xff1a; 4、字符类 []&#xff1a; 5、量词&#xff1a; 6、锚点 ^ 和 $&#xff1a; 7、捕获组 ()&#xff1a; 8、转义字符 \&#xff1a; 三、日常使用的正则…

markdown记录

文章目录 基础操作使用一级列表、二级列表 博文链接 基础操作 使用一级列表、二级列表 博文链接 CSDN-Markdown语法集锦 CSDN-markdown语法之如何使用LaTeX语法编写数学公式 CSDN Markdown简明教程1-关于Markdown CSDN Markdown简明教程2-基本使用 CSDN Markdown简明教程3-表…

Bash脚本调用百度翻译API进行中文到英文的翻译

写一个bash脚本调用百度翻译API进行中文到英文的翻译&#xff0c;首先需要进行相关的申请。看百度给出的文档链接: 百度翻译API文档 需要先注册一个百度账号&#xff0c;然后申请APPID。脚本中会用到appid和key这两个值。按照文档给出的提示可以获得。如下是脚本&#xff1a; #…

使用VBA创建Excel条件格式

实例需求&#xff1a;数据总行数不确定&#xff0c;现需要将Category区域&#xff08;即C列到J列&#xff09;中第3行开始的区域设置条件格式&#xff0c;规则如下&#xff1a; 只对部分指定单元格应用色阶条件格式&#xff08;3色&#xff09;指定单元格应满足条件&#xff1…

移动距离

//偶数行需要反转&#xff0c;判断行数时,最后一个需要特判,可以用向上取整 //也可以把传入的值减一,下标从0开始 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader;public class Main{static int w,m,n;static BufferedReader i…

大数据技术1:大数据发展简史

前言&#xff1a;学习大数据技术&#xff0c;知道会用已经够了&#xff0c;但是要想走得更远&#xff0c;应该了解它发展的来龙去脉&#xff0c;为何会有新的技术/工具的出现&#xff0c;相比老的技术有什么样的进步。 1、传统数据处理系统存在的问题 随着信息时代互联网技术爆…

JDBC简介及快速入门-黑马(P1)

黑马视频b站链接&#xff1a; 01-JDBC简介&快速入门_哔哩哔哩_bilibili &#x1f436;一、JDBC 简介 JDBC 概念&#xff1a; JDBC 就是使用 Java 语言操作关系型数据库的一套 API。 全称&#xff08;Java DataBase Connectivity&#xff09; Java 数据库连接 JDBC 本质…

React 笔记 jsx

严格约定&#xff1a;React 组件必须以大写字母开头&#xff0c;而 HTML 标签则必须是小写字母。 React JSX JSX 是由 React 推广的 JavaScript 语法扩展。 用于表达组件的 特殊语法的 js 函数 要求标签必须闭合&#xff1b;返回的组件必须包裹在一个父标签内&#xff1b; …

鸿蒙4.0开发笔记之ArkTS语法基础之数据传递与共享详细讲解(十八)

文章目录 一、路由数据传递&#xff08;router&#xff09;1、路由数据传递定义2、路由数据传递使用方法3、数据传递两个页面的效果 二、页面间数据共享&#xff08;EntryAbility&#xff09;1、定义2、实现案例3、避坑点 三、数据传递练习 一、路由数据传递&#xff08;router…

PaaS(平台即服务)——云计算服务模型(特点,应用场景,优点和缺点,示例)

PaaS&#xff08;平台即服务&#xff09;是云计算的一种服务模型&#xff0c;它提供了一个平台&#xff0c;允许客户开发、运行和管理应用程序&#xff0c;而无需建立和维护通常与这些过程相关的复杂基础设施。PaaS 是作为服务交付的一种方式&#xff0c;它提供了一套工具和服务…

网卡学习资料整理

GMAC网卡相关介绍与分析 https://www.cnblogs.com/forwards/p/17101438.html https://www.eefocus.com/article/1635234.html Linux Phy 驱动解析_linux phy驱动-CSDN博客 GMAC接口五篇 https://blog.csdn.net/dkmknjk/category_11837422.html 以太网扫盲&#xff08;一&am…

麒麟V10服务器安装Apache+PHP

安装PHP yum install php yum install php-curl php-gd php-json php-mbstring php-exif php-mysqlnd php-pgsql php-pdo php-xml 配置文件 /etc/php.ini 修改参数 date.timezone Asia/Shanghai max_execution_time 60 memory_limit 1280M post_max_size 200M file_upload…

分布式和微服务区别

1.分布式 微服务和分布式的区别 1.将一个大的系统划分为多个业务模块&#xff0c;业务模块分别部署到不同的机器上&#xff0c;各个业务模块之间通过接口进行数据交互。区别分布式的方式是根据不同机器不同业务。 2.分布式是否属于微服务&#xff1f; 答案是肯定的。微服务的意…

动手制作个人电脑对话机器人transformers+DialoGPT

简介&#xff1a;DialoGPT是一个对话模型&#xff0c;由微软基于GPT-2训练。由于DialoGPT在对话数据上进行了预训练&#xff0c;所以它比原始的GPT-2更擅长生成类似对话的文本。DialoGPT的主要目标是生成自然且连贯的对话&#xff0c;而不是在所有情况下都提供事实上的正确答案…

基于Spring、SpringMVC、MyBatis开发的游乐场管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring、SpringMVC、MyBatis开发的游…

ca单点登录

最近搞得单点登录碰到了很多问题&#xff0c;具体的问题有如下几个&#xff1a; ①如何获取usbkey的值 ②要实现的单点登录的方案 ③如何获取多个key的值&#xff0c;并进行选择登录 ④ie跳谷歌访问业务界面 注&#xff1a;最后将实现代码附上&#xff0c;希望对大家有所帮助 1…

Numpy数组的运算(第7讲)

Numpy数组的运算(第7讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…

进制 + 原码,反码,补码

进制转换 整数部分 小数部分 原码 反码 补码 原码转补码&#xff1a; 左边和右边第一个1不变&#xff0c;中间取反。-0 除外。 计算机系统中数值一律用补码来存储的原因 其他 术语 进制表 进制数的表示 详细教程可转 爱编程的大丙