在vue中用户点击播放音频没有声音的解决办法

最新推荐文章于 2024-06-15 20:05:56 发布
最新推荐文章于 2024-06-15 20:05:56 发布
阅读量1.7k 收藏
点赞数
文章标签： vue播放音频第一次没声音
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40999917/article/details/117747046
版权

 点击第二次才有声音，让用户双击的话很不友好，这里给他设置了两个事件

 <div class="opw-div_but" @touchstart="submit" @touchend="submit">

    确定

 </div>



  submit() {

       this.audioUrl = require("@/assets/audio/50u888piCZ4n.mp3");

        this.$refs.audio.play();

    },

 

盏茶作酒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue通过点击事件读取音频文件的方法
08-27
最近做项目遇到这样的一个需求，通过select元素来选择音频文件的名称，点击按钮可以进行试听。接下来通过本文给大家介绍vue项目中通过点击事件读取音频文件的方法,需要的朋友可以参考下
vue-video-player播放本地视频没有声音
HarryWg的博客
02-24 3104
关于vue-video-player播放本地视频没有声音 一开始，我放的是播放李狗嗨，结果怎么调怎么都没有声音，翻遍google、baidu也没有解答 后来，我换成了一拳超人的一集，有声音了 总结 一个191MB，一个1.31GB，完~ ...
如何在Vue3中使用音频库Howler.js实现音频播放？
最新发布
有我更精彩的博客
06-15 956
Howler.js 提供了丰富的事件接口，你可以监听音频播放过程中的各种事件。alert('音频播放完成');});},
vue 播放.aac格式的音频文件
zcylyzhi4的博客
12-17 1355
代码 data() { return { audioUrl : 'http://192.168.50.122:8080/test/test.aac' } } <audio controls="controls"> <source :src="audioUrl" type="audio/mpeg"> </audio> .... 效果 ...
videoPlayer 设置视频有声自动播放方案
林中明月间丶
03-23 4438
https://segmentfault.com/a/1190000020073391 感谢提供思路 video标签加上自动播放autoplay发现在chrome、火狐浏等览器上都不会自动播放 function openVoice() { var videoPlayer = document.getElementById("homeVideo") videoPlayer.muted = false videoPlayer.play() } 因为我的项目是需求是，
Vue动态设置audio/video的src不能播放的问题
@梢的博客
09-17 6612
Vue动态设置audio/video的src不能播放的问题 <audio ref="myAudio" :src="playSrc" > 您的浏览器不支持音频播放 </audio> 这里默认列表第一个音频 data () { return { playSrc: this.audioList[0], } }, 当我动态去更改src的后要调用load() 方法重新加载一下（myAudio是我自
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
01-18
一、vue中解决chrome浏览器自动播放音频 需求 有新订单的时候，页面自动语音提示和弹出提示框； 问题 chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对...
解决ios微信下vue项目组件切换并自动播放音频问题
08-28
在Vue项目中，组件切换并自动播放音频是常见的问题，特别是在ios微信下，解决这个问题变得尤为重要。本文将为大家带来解决ios微信下vue项目组件切换并自动播放音频问题的方法。 首先，我们需要了解为什么ios微信下...
【VUE】播放本地语音/音频
weixin_38792911的博客
11-30 3639
音频文件存在assets文件夹下，为mp3格式 <audio ref="audioTip" style="display:none;" > <source :src="audio.src"> </audio> data() { return { audio:{ //消息通知 src:require("../../assets/common/audio/wx.mp3"), } }; } //播
Vue播放音频声音
Suk__的博客
03-03 5659
Audio对象 有时我们并不是想要在页面上放置一个播放音频的控件然后人为点击去播放,而是通过一个图标点击事件或者js去控制它的播放暂停等操作,此时我们就要使用到Audio对象,博主这里是Vue项目,所以在data中使用的同一个Audio实例 export default { data(){ return { // 实例化一个音频播放器对象 audio: new Audio() } } } 然后想要在后续只
使用ckplay播放器插件遇到的问题总结
lxuanz的博客
12-07 1789
谷歌不能自动播放音频
在Vue项目中用Audio实现语音的播放
热门推荐
杜风云的博客
09-19 1万+
在Vue项目中用Audio实现语音的播放 ​ 跟据项目的需求，有些时候我们需要实现，通过后台获取语音流，然后网页进行语音播放，在网页播放语音就可以避免用户的本地语音库的安装。 从后台获取语音流，生成Audio标签并赋值 ​ 这里我用了axios请求 getAudio() { this.$axios({ url: "api/system/tts",//获取语音...
vue音频文件在本地可以播放，打包上线以后播放不了
weixin_46194350的博客
03-03 825
vue音频文件在本地可以播放，打包上线以后播放不了
vue-video-player有画面没声音_电视盒子没声音？这几个地方要注意！
weixin_39576149的博客
11-25 1052
电视盒子用久了经常会出现各种各样的问题，今天就让我们一起看看电视盒子突然没声音应该怎么办？一、检查数据线连接先把HDMI线两头拔掉，然后重新插紧；将电视机换一组HDMI接口；HDMI线和AV线不要同时插上；连接HDMI线即可。二、检查盒子软件设置电视盒子没声音，不排除我们误操作导致设置里将视频静音没有恢复，此时我们可以通过手动调整。打开机顶盒主页，在应用里选择设置；在设置里选择声音；在声...
vue js 语音播报 语音读文字 window.speechSynthesis new SpeechSynthesisUtterance (补充无声音 问题解决办法)
张一西的博客
01-05 9112
// 语音停止 handleStop(e) { if(window.speechSynthesis){ const synth = window.speechSynthesis; const msg = new SpeechSynthesisUtterance(); msg.text = e; msg.lang = "zh-CN"; ..
Vue播放音频文件（声音）
publicman_的博客
08-31 1万+
Vue播放音频文件
vue背景音乐，点击音效audio实现
sunluyi的博客
04-03 4399
<audio ref="audio" :src="audioUrl"></audio> data() { return { audioUrl:require('../../common/images/energy_charge/my.mp3'),//声音文件 } } methods:{ play(){ this.$refs.audio.play();//点击...
vue项目JS播放音频音效和背景音乐
鹏多多的博客
09-08 5833
博主最近在做一个线上直播互动课堂的Vue项目，里面有一些这样的互动：老师奖励学生A一个奖章，要自动播放得奖的音效。得到这个需求，博主立马开码。 myPlay(){ let mp3 = new Audio(); mp3.src = "./奖励的声音.mp3"; mp3.load(); mp3.play(); setTimeout(() => { mp3.pause(); }, 3000); } 结果一直报错 度娘告诉我，浏览器18年改版
vue项目中audio标签的音乐无法播放 audio 标签自动播放不起作用或者 play() 报错 音频播放时出现 Uncaught (in promise) DOMException: play
web全栈开发的博客
03-08 9669
vue项目中audio标签的音乐无法播放 问题：vue项目中audio标签直接添加src时音乐无法播放： 在网上找了个中办法， 说设置浏览器，各种坑， 以下实现方法如下 如： 1、这样添加时，可以正常播放，然而 <audio controls="controls"> <source src="http://images.81dd.cn/5fc46995d0b34fbf9c85bc35f222dec0" type="audio/ogg"> <source src="htt
vue中解决chrome浏览器自动播放音频
05-25
在Vue中解决Chrome浏览器自动播放音频的问题可以通过两种方法： 1. 使用Vue的生命周期函数mounted()来控制音频的播放。在mounted()函数中，通过JavaScript代码控制音频的播放，这样就避免了Chrome浏览器自动播放音频的问题。 2. 使用HTML5的autoplay属性来控制音频的播放。在Vue的模板中，可以使用autoplay属性来控制音频的自动播放。这种方法需要注意的是，Chrome浏览器会禁止自动播放音频，需要用户手动操作才能播放。 下面是两种方法的示例代码： 1. 使用mounted()函数控制音频播放 ```html <template> <div> <audio ref="audio" src="audio.mp3"></audio> </div> </template> <script> export default { mounted() { this.$refs.audio.play(); } } </script> ``` 2. 使用autoplay属性控制音频播放 ```html <template> <div> <audio src="audio.mp3" autoplay></audio> </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值