vue播放音频的两种方法(audio标签和audiocontext方法)

更新时间:2023-05-22 11:12:27 阅读: 评论:0

长寿花vue播放⾳频的两种⽅法(audio标签和audiocontext⽅法)
最近在做桌⾯端应⽤基于electron-vue,涉及⾳频播放,就简单研究⼀下。
⼀种是基于audio标签,另⼀种是基于AudioContext⽅法。
1997年属什么生肖
audio标签
两种实现,第⼀种是直接在HTML中使⽤标签
<audio src="../viper.mp3" controls="controls"></audio>
第⼆种是在js⽂件中使⽤
let audio = new Audio()
audio.src = "../viper.mp3"
audio.play();
但在electron中是存在问题,因为electron是基于chrome内核,所以不能直接访问本地⽂件,还请哪位⼤神指导如何规避该问题。AudioContext⽅法
什么目了然其实该⽅法也存在访问本地的问题,所以借助node.js来获取⽂件。
let fs = require('fs');
let AudioContext = window.AudioContext ;
let audioCtx = AudioContext ? new AudioContext() : '';
_this.audioPlay(data);
});
中国抗日audioPlay:function (data) {
let audioBufferSourceNode = ateBufferSource();
audioCtx.decodeAudioData(data.buffer).then(function (decodedData) {
audioBufferSourceNode.buffer = decodedData;
});
audioBufferSourceNode && audioBufferSourceNode.start(0,0,1);
}
这⾥⾯存在三个坑。
⼀是,fs.readFile返回的数据,如果不能直接解析,那么返回的是原⽣buffer,但audioBufferSourceNode.buffer需要的audioBuffer格式。读后感万能开头
那么就需要从buffer转换到audioBuffer,⽹上暂时没有找到直接⽅法,现在的解决⽅法是Buffer转arrayBuffer再转audioBuffer。
布衣柜
_this.audioPlay(data);
});
个体工商户营业执照申请流程console.log(typeof data)  //返回类型为object,就是原⽣Buffer
let dataTmp = data.buffer  // arrayBuffer
audioCtx.decodeAudioData(dataTmp)  //这才是最后的audioBuffer
⼆是,audioBufferSourceNode只能播放⾳频⼀次,所以这就是为什么在audioPlay⽅法中需要重新new。⽽不是抽到公共部分。
audioPlay:function (data) {
let audioBufferSourceNode = ateBufferSource();
}
公主的照片三是,存在部分⾳频解析失败的情况,不知道是类型转换导致,还是audioContext⾃⾝的BUG,如果哪位⼤神指导,还请多多指点

本文发布于:2023-05-22 11:12:27,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/731176.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:播放   问题   解析   存在   需要   不能   部分   返回
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图