Vor kurzem arbeite ich an einer Desktop-Anwendung, die auf Electron-Vue basiert und Audiowiedergabe beinhaltet, daher werde ich sie kurz studieren.
Eine basiert auf dem Audio-Tag und die andere auf der AudioContext-Methode.
Audio-Tag
两种实现，第一种是直接在HTML中使用标签
<audio src="../viper.mp3" controls="controls"></audio>
第二种是在js文件中使用
let audio = new Audio()
audio.src = "../viper.mp3"
audio.play();
Es gibt jedoch ein Problem bei Electron. Da Electron auf dem Chrome-Kernel basiert, kann es nicht direkt auf lokale Dateien zugreifen. Kann mir bitte jemand helfen, wie ich dieses Problem vermeiden kann?
AudioContext-Methoden
Tatsächlich weist diese Methode auch das Problem des lokalen Zugriffs auf, sodass zum Abrufen der Datei node.js verwendet wird.
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);
}
Hier gibt es drei Fallstricke.
Wenn die von fs.readFile zurückgegebenen Daten nicht direkt analysiert werden können, wird zunächst der native Puffer zurückgegeben, jedoch das für audioBufferSourceNode.buffer erforderliche audioBuffer-Format.
Dann müssen Sie vom Puffer in audioBuffer konvertieren. Es gibt online keine direkte Methode. Die aktuelle Lösung besteht darin, Buffer in arrayBuffer und dann in audioBuffer zu konvertieren.
fs.readFile(_this.voicePath,function(err, data){
_this.audioPlay(data);
});
console.log(typeof data) //返回类型为object，就是原生Buffer
let dataTmp = data.buffer // arrayBuffer
audioCtx.decodeAudioData(dataTmp) //这才是最后的audioBuffer
Zweitens kann audioBufferSourceNode Audio nur einmal abspielen, weshalb es in der audioPlay-Methode neu sein muss. Anstatt auf den öffentlichen Teil hinzuweisen.
audioPlay:function (data) {
let audioBufferSourceNode = audioCtx.createBufferSource();
}