audio的播放没有声音的问题

今天遇到一个audio 播放没有声音，让我们来看一下代码：

 <audio id="audio" ref="audio"><source :src="voice.url" />
</audio><p class="el-display"><span class="el-display__title">语音描述</span><span class="el-display__content"><template v-if="detail.dangerDescVoiceUrl == null || detail.dangerDescVoiceUrl == ''"><span> -- </span></template><template v-else><span class="voice" @click="playAudio"><img src="~/assets/images/inspection/voice.png" class="voice-icon" /><span>{{ voice.duration }}s</span></span></template></span></p>pageData() {    this.$axios.get(`${API_....}/${this.$route.query.id}`).then(res => {...this.voice.url = res.data.detail.dangerDescVoiceUrl
}playAudio() {console.log(this.$refs.audio)this.$refs.audio.play()document.querySelector(".voice-icon").style.animationPlayState = "running"

描述：

在 playAudio 中打印出来的链接也是可以正常访问的
把链接填到 source src="....." 中可以正常播放

一热心小伙说，“呀，我之前也遇到过，你这样，在方法里面写…”
让我们来看一下他说的写法

pageData() {    this.$axios.get(`${API_....}/${this.$route.query.id}`).then(res => {...this.voice.url = res.data.detail.dangerDescVoiceUrlthis.audioContent = `<div><audio id="audio" ref="audio" @οnlοad="loadAudio" controls><source src="${this.voice.url}" /></audio></div>`})
}

然后拼接到上面去，来有没有知道这样写的问题：

另一个大佬说：这样写会在audioContent 插入到html中去也不是dom，在playAudio中的 ref 会无效。只会当dom去处理

然后一语点拨了我，它有onload的事件吗？能触发吗？

触发这个词立马给我当头一棒，简简单单一句能解决的，原谅我是个憨憨…

playAudio() {this.$refs.audio.load()this.$refs.audio.play()document.querySelector(".voice-icon").style.animationPlayState = "running"
}

原谅我是个菜鸡小白，暂时记录一下，接下来补充关于 audio 的知识

浏览器自动播放问题记录

<template><audio ref="audio" loop /></template>

在data中定义播放路径：

   audioSrc: "/audio/9779.mp3",

getMp3() {this.$refs.audio.src = this.audioSrcthis.$refs.audio.play()
},

audio的播放没有声音的问题相关推荐

ffplay播放没有声音SDL_OpenAudio (2 channels, 44100 Hz): WASAPI can't initialize audio client
在window7 64bit下安装了ffmpeg,然后用ffplay命令播放声音时发生这个错误: SDL_OpenAudio (2 channels, 44100 Hz): WASAPI can't ...
Java ffmpeg视频压缩IOS播放没有声音问题解决（超级简单）
排查问题:ffmpeg视频压缩IOS播放没有声音问题解决方法:将音频格式设置为:aac:将视频格式设置为h264: 查询了好多文章,总结如下,废话少说,直接上代码: public static vo ...
uniapp-微信小程序-ios音乐播放没声音
const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAud ...
微信小程序web-view使用audio标签播放音频文件时无法自动播放的问题
重点: 这个解决方法仍然最少还是需要点击一次才可以, 完全不点击就自动播放的方法暂时还是没有找到 1. 背景我要实现的功能是语音导航, 需要将导航的信息通过文字转换成语音, 然后播放出来. 现在就差 ...
利用电脑投放手机声音且可不冲突同时播放电脑声音的方法
最近需要将手机的声音投放至电脑播放,且希望电脑与手机的声音可以实现不冲突的同时播放,即二者不会出现"一个播放,另一个就要被自动暂停"的此消彼长的情况.通过尝试,发现基于Blue ...
html audio重新播放,javascript – Web Audio API：如何重新开始播放声音？
我在Chrome中编写了一个基本脚本,它使用新的Web Audio Api加载3个声音文件(通过 XMLHTTPRequest),并逐个播放它们.我为每个声音提供了一个单独的按钮,允许用户启动和停止每 ...
HTML - Marquee循环滚动+Audio音乐播放
Audio音乐播放(W3School): Marquee循环滚动: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direct ...
web audio api_带有Web Audio API的动态声音
web audio api This article is part of a web dev series from Microsoft. Thank you for supporting the ...
audioContext audio 音频播放
目的:通过对 audio 和 audioContext 的使用,加深对音频的处理使用标签播放音频使用 AudioContext 对象播放音频 <进阶>通过 AudioContext ...

audio的播放没有声音的问题

audio的播放没有声音的问题相关推荐

最新文章

热门文章