Google Chrome litige JavaScript dans l'obtention de l'utilisateur audio - L'audiocontext n'a pas été autorisé à démarrer
J'ai ce code JavaScript que j'utilise pour capturer l'entrée audio à partir de l'utilisateur lorsqu'il clique sur un bouton de microphone. Ce code fonctionne à Mozila Firefox mais quand je l'utilise dans Google Chrome Il ne fonctionne pas et affiche cet avertissement/erreur dans la console - The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
var r = function() {
var e = {}
, t = void 0
, n = getBotConfig()
, r = new Audio("data:audio/wav;base64,")
, o = !1;
if (!n.isIE()) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var i = new AudioContext;
e.toggleRecording = function(e, t, n, r, s, a, c) {
e.classList.contains("recording") ? (e.classList.remove("recording"),
o = !1,
t.emit("end-recording", {
session_id: a,
bot_id: c
}),
document.getElementById("btnToggle").setAttribute("style", "background-color:transparent"),
document.getElementsByClassName("fa-microphone")[0] && document.getElementsByClassName("fa-microphone")[0].setAttribute("style", "color:" + s)) : (e.classList.add("recording"),
o = !0,
t.emit("start-recording", {
numChannels: 1,
bps: 16,
fps: parseInt(i.sampleRate),
session_id: a,
bot_id: c
}),
document.getElementById("btnToggle").setAttribute("style", "background-color:" + n),
document.getElementsByClassName("fa-microphone")[0] && document.getElementsByClassName("fa-microphone")[0].setAttribute("style", "color:" + r))
}
,
e.onAudioTTS = function(e) {
try {
r.pause(),
c(e)
} catch (t) {
c(e)
}
}
,
e.initAudio = function(e, n, r) {
console.log("audio initiated"),
t = e,
navigator.getUserMedia || (navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia),
navigator.cancelAnimationFrame || (navigator.cancelAnimationFrame = navigator.webkitCancelAnimationFrame || navigator.mozCancelAnimationFrame),
navigator.requestAnimationFrame || (navigator.requestAnimationFrame = navigator.webkitRequestAnimationFrame || navigator.mozRequestAnimationFrame),
navigator.getUserMedia({
audio: !0
}, a, function(e) {
alert("Error getting audio"),
console.log(e)
})
}
;
var s = function(e) {
var t = i.createChannelSplitter(2)
, n = i.createChannelMerger(2);
return e.connect(t),
t.connect(n, 0, 0),
t.connect(n, 0, 1),
n
}
, a = function(e) {
var n = i.createGain()
, r = i.createMediaStreamSource(e)
, a = r;
a = s(a),
a.connect(n);
var c = (i.createScriptProcessor || i.createJavaScriptNode).call(i, 1024, 1, 1);
c.onaudioprocess = function(e) {
if (o) {
for (var n = e.inputBuffer.getChannelData(0), r = new ArrayBuffer(2 * n.length), i = new DataView(r), s = 0, a = 0; s < n.length; s++,
a += 2) {
var c = Math.max(-1, Math.min(1, n[s]));
i.setInt16(a, c < 0 ? 32768 * c : 32767 * c, !0)
}
t.emit("write-audio", r)
}
}
,
n.connect(c),
c.connect(i.destination);
var u = i.createGain();
u.gain.value = 0,
n.connect(u),
u.connect(i.destination)
}
, c = function(e) {
r.src = "data:audio/wav;base64," + e,
r.play()
};
return e
}
};
L'avertissement/erreur vient à la ligne var i = new AudioContext;. Il utilisait avant de travailler sur Google Chrome navigateur aussi, mais maintenant, cela ne fonctionne pas. La page Description de Google Developers Page dit resume() doit être utilisé mais je ne sais pas comment et Où devrais-je faire ça.
vous devriez pouvoir appeler resume() quelque part juste avant d'appeler play(). L'important est de l'appeler dans une action/événement utilisateur - comme le clic sur le bouton du microphone.
Point clé: Si un audiocontext est créé avant le document recevant un geste d'utilisateur, il sera créé dans l'état "suspendu" et vous devrez appeler CV () après la réception d'un geste de l'utilisateur.
de https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Il travaillait avant de travailler sur Google Chrome navigateur aussi mais maintenant, cela ne fonctionne pas.
La nouvelle politique a été appliquée récemment dans A chrome Mise à jour.