Así que tengo dos botones (inicio/parada), lienzo con visualizador de sonido y reproductor de audio html5. Todo funciona bien, pero no en IOS Safari (probado en 15.3). En IOS, muestra que se inició la grabación, que todo va bien, pero cuando la grabación se detiene y se inserta un blob en la etiqueta de audio, muestra el mensaje de "error" dentro de la etiqueta de audio en lugar de reproducir este blob. Aquí está el código:
var stop = document.querySelector('#rec-stop'); var player = document.querySelector('#rec-player'); var totest = document.querySelector('.test-choice-btn'); navigator.mediaDevices.getUserMedia({audio:true}) .then(stream => {handlerFunction2(stream)}) function handlerFunction2(stream) { rec = new MediaRecorder(stream); audioContext = new AudioContext(); analyser = audioContext.createAnalyser(); microphone = audioContext.createMediaStreamSource(stream); javascriptNode = audioContext.createScriptProcessor(2048, 1, 1); analyser.smoothingTimeConstant = 0.8; analyser.fftSize = 1024; microphone.connect(analyser); analyser.connect(javascriptNode); javascriptNode.connect(audioContext.destination); canvasContext = $("#rec-canvas")[0].getContext("2d"); javascriptNode.onaudioprocess = function() { var array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(array); var values = 0; var length = array.length; for (var i = 0; i < length; i++) { values += (array[i]); } var average = values / length; canvasContext.clearRect(0, 0, 150, 270); canvasContext.fillStyle = '#BadA55'; canvasContext.fillRect(0, 270 - average, 150, 270); canvasContext.fillStyle = '#262626'; } audioChunks = []; rec.start(); stop.onclick = e => { rec.stop(); totest.classList.add('shown'); } rec.ondataavailable = e => { audioChunks.push(e.data); if (rec.state == "inactive"){ let blob = new Blob(audioChunks,{type:'audio/mpeg-3'}); player.src = URL.createObjectURL(blob); player.controls=true; player.autoplay=true; } } }