最近在做桌面端应用基于electron-vue，涉及音频播放，就简单研究一下。
一种是基于audio标签，另一种是基于AudioContext方法。
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() : '';fs.readFile(_this.voicePath,function(err, data){_this.audioPlay(data);});audioPlay:function (data) {let audioBufferSourceNode = audioCtx.createBufferSource();audioCtx.decodeAudioData(data.buffer).then(function (decodedData) {audioBufferSourceNode.buffer = decodedData;});audioBufferSourceNode.connect(audioCtx.destination);audioBufferSourceNode && audioBufferSourceNode.start(0,0,1);}
这里面存在三个坑。
一是，fs.readFile返回的数据，如果不能直接解析，那么返回的是原生buffer，但audioBufferSourceNode.buffer需要的audioBuffer格式。
那么就需要从buffer转换到audioBuffer，网上暂时没有找到直接方法，现在的解决方法是Buffer转arrayBuffer再转audioBuffer。
fs.readFile(_this.voicePath,function(err, data){_this.audioPlay(data);});console.log(typeof data) //返回类型为object，就是原生Bufferlet dataTmp = data.buffer // arrayBufferaudioCtx.decodeAudioData(dataTmp) //这才是最后的audioBuffer
二是，audioBufferSourceNode只能播放音频一次，所以这就是为什么在audioPlay方法中需要重新new。而不是抽到公共部分。
audioPlay:function (data) {let audioBufferSourceNode = audioCtx.createBufferSource();}
