1. Toy模板网首页
  2. > Toy博客

vue3 -- 使用audio标签播放音频

9月前 作者：Kingsaj 分类：Toy博客 阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了vue3 -- 使用audio标签播放音频。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1：需求

公司系统内的审批页面，前端要根据后台推送的信息，使用’提示音’提醒用户进行对应审批操作。

2：开发环境

  1. vue3 项目 简介 | Vue.js (vuejs.org)
  2. TypeScript TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)
  3. vite Vite | 下一代的前端工具链 (vitejs.dev)

3：思路

  1. 下载好使用音频文件 音效网，保存本地。

  2. 将音频文件保存到项目中，建议文件放在public\mp3\dingdong.mp3下。
    vue3 播放音频,项目实操,音视频,javascript,前端

  3. 用户进入该审批页面，点击‘开启提示音’，前端轮询请求后端接口，如果有新的数据需要审批，页面会出现提示音。文章来源地址https://www.toymoban.com/news/detail-791295.html

4࿱

到了这里，关于vue3 -- 使用audio标签播放音频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • h5音频标签模拟实现语音条(VUE3)

    h5音频标签模拟实现语音条(VUE3)

    思路：将原audio标签通过css隐藏，在通过css的div实现语音条样式，获取到audio的ref,操作audio的play、pause方法即可 效果图： template   div style=\\\"display: none\\\"     audio       controls       ref=\\\"audioRef\\\"       @loadedmetadata=\\\"handleLoadedMetadata\\\"       @ended=\\\"audioEnded\\\"           !-- source :src=\\\"

    2024年03月20日
    浏览(40)
  • 【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )

    【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )

    传统 HTML 开发中 , 如果想要向网页中嵌入音频和视频 , 需要 使用 Flash 浏览器插件才能实现 ; 在 HTML5 中 , 使用 多媒体标签 , 即可实现向浏览器中插入音视频 , 多媒体标签如下 : 音频标签 : audio 视频标签 : video HTML 5 的 audio 音频标签 , 支持 ogg / mp3 / wav 三种格式的音频 , 不同的

    2024年02月15日
    浏览(60)
  • Audio API 实现音频播放器

    Audio API 实现音频播放器

    市面上实现音频播放器的库有很多，比如wavesurfer.js、howler.js等等，但是都不支持大音频文件处理，100多M的文件就有可能导致程序崩溃。总之和我目前的需求不太符合，所以打算自己实现一个音频播放器，这样不管什么需求 在技术上都可控。下面我们简单介绍下 wavesurferJs 、

    2024年02月10日
    浏览(44)
  • web audio api 实现音频播放

    web audio api 实现音频播放

    最近被选中做音视频，挺幸运的吧，一直在接触新的项目，每次都能被分到新的项目组，干好多费头发的事情😂 上周五肝到12点半，总算是把音频编辑上了线 总结了一下，决定写一写，也盘点一下遇到的坑 web audio API是 HTML5新增的API，提供了在web上控制音频的一个有效通用的

    2023年04月09日
    浏览(50)

  • audio音频不能自动播放的解决方法

    由于浏览器限制的原因，不允许自动播放audio音频，尝试网上的方法后也没有进展（如果有解决方法，欢迎评论~） 一、首先创建 audio 标签 二、因为在页面刷新后需要先执行动画，动画完成后才去播放音乐，所以在执行 mounted 函数时，先加载音乐源 三、在动画完成后，进

    2024年02月11日
    浏览(110)
  • flutter开发实战-just_audio实现播放音频暂停音频设置音量等

    flutter开发实战-just_audio实现播放音频暂停音频设置音量等

    flutter开发实战-just_audio实现播放音频暂停音频设置音量等 最近开发过程中遇到需要播放背景音等音频播放，这里使用just_audio来实现播放音频暂停音频设置音量等 在pubspec.yaml引入just_audio 在iOS上，video_player使用的是AVPlayer进行播放。 在Android上，video_player使用的是ExoPlayer。 2.

    2024年02月13日
    浏览(45)
  • Unity 之利用Audio Source（音频源）组件用于播放声音

    Unity 之利用Audio Source（音频源）组件用于播放声音

    Unity中的Audio Source（音频源）是一个用于播放声音的组件，通常附加到游戏对象上，以便在游戏中播放音频效果、音乐或对话。以下是Audio Source的详细介绍： 添加Audio Source ： 要在Unity中使用Audio Source，首先需要将其附加到一个游戏对象上。通常，您可以选择场景中的一个空游

    2024年02月09日
    浏览(50)
  • vue3.0 安卓和ios h5 移动端音频自定义圆环可拖拽播放（兼容微信浏览器）

    vue3.0 安卓和ios h5 移动端音频自定义圆环可拖拽播放（兼容微信浏览器）

    安装  npm install weixin-js-sdk 引入 template     div class=\\\"circle_box\\\"         div id=\\\"content\\\"/div          img class=\\\"img_0\\\" src=\\\"https://img.yzcdn.cn/vant/cat.jpeg\\\" alt=\\\"\\\"          img @click=\\\"changeType\\\" class=\\\"img_1\\\" v-show=\\\"playbool\\\" src=\\\"@/assets/decompression/pressure_audio_play.png\\\" alt=\\\"\\\"          img @click=\\\"changeType\\\"

    2023年04月23日
    浏览(99)

  • 同源跨窗口通信：网易云音乐不同标签页打开同一页面，暂停原先标签页音频播放

    原文见：语雀 有个声音很好听的小帅哥问我说，如果当前浏览器打开一个标签页，页面播放着音乐，然后相同的链接又在另外一个页面打开，该如何将之前的页面音频停止播放。 有小帅哥问问题，我当然要回答啦（其实是我不得不答）🤣 我一想，这是跨窗口通信，用postM

    2023年04月08日
    浏览(45)

  • Vue3-在HTML标签、组件标签上使用v-model

    本篇为Vue3学习中遇到的v-model相关的记录，如有问题欢迎指正 v-model通常在input、select等标签上来实现数据双向绑定 原理 ：v-model通过给标签value赋值来实现  数据—页面 的绑定。然后通过绑定input事件实现 页面—数据 的绑定。 原理 ：在组件上时，v-model通过 :modelValue 来进行

    2024年01月24日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包