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

站长资源 2025/1/9 佚名

2 0 1

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

需求

有新订单的时候，页面自动语音提示和弹出提示框；

问题

chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出如下错误：Uncaught (in promise) DOMException；

解决

在网上找了很多方法都不行，最后试出一种可行：语音播放显示出来才可以自动播放语音，如下图；

上代码：

//这里就是语音播放器，必须显示出来
<audio controls="controls" :src="/UploadFiles/2021-04-02/sound">

功能的全部代码：


<div>
 <v-btn color="lime lighten-1" @click="handleDispatch" small><v-icon left>mdi-account</v-icon>人工派单 </v-btn>
 //这里就是语音播放器，必须显示出来
 <audio controls="controls" :src="/UploadFiles/2021-04-02/sound">

二、MP3文件上传到线上，webpack打包丢失

去看webpack.config.js文件的配置,这里MP3会打包到media文件，但是没生成；


{
 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\"htmlcode">

<script>
//语音的路径（当模块引入，webpack好将MP3打包）
import sounds from '@/assets/sound/1.mp3';
export default {
 data() {
 return {
 sound: sounds,
　　}
　}


最后就打包成功

最后看到一种，直接URL使用百度播报，我没试过o.o 他的微博：以下代码来自https://www.cnblogs.com/gfweb/p/11726365.html
1,在工具文件夹utils，创建一个js文件 （voicePrompt.js）


function voicePrompt (text){
 new Audio('http://tts.baidu.com/text2audio"htmlcode">

import * as voicePromptFun from './utils/voicePrompt' 
Vue.prototype.voicePrompt = voicePromptFun.voicePrompt //语音提醒


3在其他页面调用


this.voicePrompt('皮卡丘');




                                
                                
                                    vue,chrome浏览器自动播放音频,vue,chrome浏览器

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2025年01月09日

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

IDEA配置jQuery, $符号不再显示黄色波浪线的问题

vue实现选中效果

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接