chorme vue中使用audio自动播放问题

最新推荐文章于 2024-09-16 15:56:04 发布

吃鱼吐泡泡

最新推荐文章于 2024-09-16 15:56:04 发布

阅读量1.9w

点赞数 1

分类专栏：前端 HTML 文章标签： audio自动播放

本文链接：https://blog.csdn.net/animatecat/article/details/86596500

版权

前端同时被 2 个专栏收录

71 篇文章 2 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

我这里是将audio文件放在static文件夹中，vue页面中直接引用；

<audio class="audio" src="./static/audio/alarm.mp3" autoplay="autoplay"></audio>

刚开始这么写的，发现并不能自动播放，百度了很多办法都不管用，无意间发现写成下边这样就可以了，具体还没想通：

<audio class="audio" src="./static/audio/alarm.mp3" controls autoplay="autoplay"
  :hidden="true"></audio>

加上controls和autoplay便可以自动播放，再用hidden将其隐藏。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吃鱼吐泡泡

关注关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
18
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决Vue中Chrome浏览器自动播放音频和将MP3语音打包到线上的问题

DsiCoder的博客

09-17

818

通过以上步骤，您可以解决Vue中Chrome浏览器自动播放音频和将MP3语音打包到线上的问题。请确保按照示例中提供的方式进行实现，并根据您的实际需求进行适当的调整。在Vue应用中，当涉及到自动播放音频和将MP3语音打包到线上时，有一些常见的问题和解决方案。在上面的示例中，我们使用了一个第三方库Howler.js来管理音频播放。首先，在Vue组件中引入Howler库，并在。在上面的示例中，我们假设将MP3语音文件命名为。然后，在Vue组件中，我们通过引入。钩子函数中创建一个音频实例。属性上，以便播放音频。

vue提示音_vue中使用audio标签进行消息提示

weixin_34493827的博客

12-23

2930

本文实现的功能是：有新的消息更新时，页面会播放提示音，提示的声音会播放15秒，然后停止播放，如果在停止播放之前又有新的消息进来，则会重新计时15秒。首先，添加audio标签，引入资源文件。在audio标签中存在如下属性：autoplay：是否音频在就绪后马上播放。controls：是否向用户显示控件，比如播放按钮。loop：是否音频结束时重新开始播放。preload：是否音频在页面加载时进行加载，...

18 条评论您还未登录，请先登录后发表或查看评论

移动端音频自动播放

07-25

IOS把音频自动播放禁止了，这个方法可以在ios上自动播放音频，视频跟音频道理一样。看看代码就知道怎么操作了。

Vue页面中实现自动播放报警音

最新发布

Jiaberrr的博客

09-16

689

在Web应用中，有时候我们需要在特定条件下播放报警音，以提醒用户关注某些重要信息。本文将为大家介绍如何在Vue页面中实现报警音的播放。准备报警音文件将报警音文件（如：alarm.mp3）放入项目的public目录下，方便访问。以下是一个简单的示例，演示如何在Vue组件中自动播放报警音：（1）在mounted生命周期钩子中调用方法，确保组件挂载后立即检查是否需要播放报警音。（2）方法中，首先通过方法检查是否满足播放条件。如果满足，则创建Audio对象并尝试播放报警音。（3）

vue应用全局音乐（自动播放）

oneya1的博客

09-13

1639

1.主要是jq写的，需要单独引入jq cdn 2.打开index.html 将代码放到里面

vue2 audio音频播放

weixin_1095的博客

05-26

9664

在audio标签中存在如下属性：autoplay：是否音频在就绪后马上播放。controls：是否向用户显示控件，比如播放按钮。loop：是否音频结束时重新开始播放。preload：是否音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src：要播放的音频的 URL。HTML5 audio支持的音频格式有wav，mp3和ogg格式。ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。mp3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。

新版chrome中vue使用audio自动播放

VVVVV

09-22

4327

在vue-cli的<script>标签中，在export之前新建一个Audio对象 var music = new Audio(); 再在mouted中使用setTimeOut定时器播放，亲测有效，可动态添加播放音频 mouted(){ setTimeOut(()=>{ music.src="音乐地址"； music.play(); },500); } ...

关于Vue中使用audio实现声音的播放

ct5211314的博客

06-11

1026

在项目中需要实现点击播放声音。

vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

01-18

一、vue中解决chrome浏览器自动播放音频需求有新订单的时候，页面自动语音提示和弹出提示框；问题 chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对...

vue-audio-recorder-Vue.js的音频记录器。它允许在服务器上创建，播放，下载和存储记录-Vue.js开发

05-27

实时演示功能精美干净的UI下载/上传/播放记录时间限制记录限制大量回调个人音频播放器MP3 / WAV支持在（台式机）Chrome OS Firefox中测试在Safari浏览器中的安装vue-audio-recorder-保存AudioRecorder道具Prop类型...

vue自动播放音频提示音（根据接口返回的状态值，提示声音。 code==0：播放成功音效； else 播放失败的音效）

蓝胖子的博客

11-01

3309

vue自动播放音频提示音（根据接口返回的状态值，提示声音。 code==0：播放成功音效； else 播放失败的音效）

在VUE中播放音频（audio介绍与使用）

热门推荐

qq_45820271的博客

08-25

3万+

本文介绍了如何使用audio标签播放音频，并在vue2,vue3以及uniapp中使用

移动端 ios 音频自动播放

qq_45872661的博客

02-02

363

安卓 <audio id="musics" src="../img/eerduosi.mp3" autoplay="true" loop="true" > //ios播放 function audioAutoPlay(id){ var audio = document.getElementById(id), play = function(){ audio.play(); document.removeEventLis.

vue实现多个音频自动播放，依次循环

qq_43378083的博客

01-13

4699

audio自动播放功能实现vue

vue实现自动播放音频

weixin_45979310的博客

09-08

1385

当这个图片出现时（false --> true），发出警报声。此时用监听器 data() { return { // 告警灯展示 showLamp: true, } }, watch: { // 报警灯亮了 "showLamp": { handler(newVal, oldVal) { // console.log(newVal, oldVal, '变化了'); // 播放声音

audio实现页面音乐自动播放

m0_68094390的博客

05-03

1980

/ 这是遇到的第二个生命周期函数。

vue中audio标签自定义音频播放栏

weixin_42966151的博客

05-11

5819

自定义audio控制栏

vue项目的自动播放背景音乐

乔的博客

12-27

9478

<template> <audio preload="auto" loop id="audio" :src="require('../../assets/mp3/214.mp3')"></audio> <div @click="changeOn" :class="isOff?'isOff':'isOn'"></div> </te...

vue中解决chrome浏览器自动播放音频

05-25

在Vue中解决Chrome浏览器自动播放音频的问题可以通过两种方法： 1. 使用Vue的生命周期函数mounted()来控制音频的播放。在mounted()函数中，通过JavaScript代码控制音频的播放，这样就避免了Chrome浏览器自动播放...