[{"data":1,"prerenderedAt":441},["ShallowReactive",2],{"tag-web":3},{"tag":4,"articles":24},{"id":5,"title":6,"body":7,"description":14,"extension":15,"img":16,"meta":17,"name":18,"navigation":19,"path":20,"seo":21,"stem":22,"__hash__":23},"tags\u002Ftags\u002Fweb.md","Web",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"Building, designing, maintaining websites and web services.","md","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",{},"web",true,"\u002Ftags\u002Fweb",{"description":14},"tags\u002Fweb","N0K1PTORhtFNif1cX9GMpY_yubD8Nbh_eQzi6w5GkEs",[25],{"id":26,"title":27,"author":28,"body":29,"createdAt":431,"description":432,"extension":15,"img":433,"meta":434,"navigation":19,"path":435,"seo":436,"stem":437,"tags":438,"updatedAt":431,"__hash__":440},"articles\u002Farticles\u002F2023_BrowserAudioOptions.md","Comparing SpeechRecognition and MediaRecorder APIs in Web Browsers","[object Object]",{"type":8,"value":30,"toc":425},[31,36,49,55,59,64,70,74,87,91,94,98,101,105,111,173,177,180,184,187,192,195,206,209,212,215,218,221,227,397,400,403,407,421],[32,33,35],"h3",{"id":34},"introduction","Introduction",[37,38,39,40,44,45,48],"p",{},"When it comes to audio processing in web applications, two key APIs come to mind: ",[41,42,43],"code",{},"SpeechRecognition"," and ",[41,46,47],{},"MediaRecorder",". While both deal with audio, they serve distinct purposes and are employed in different scenarios. In this post, we'll explore the differences between these two APIs and discuss their use cases, browser support, implementation details, and more.",[50,51],"img",{"style":52,"src":53,"alt":54,"title":54},"display: inline;","\u002Farticles\u002Fimages\u002Fspeechrecognition_1.png","image",[32,56,58],{"id":57},"speechrecognition-api","SpeechRecognition API",[60,61,63],"h4",{"id":62},"purpose","Purpose",[37,65,66,67,69],{},"The ",[41,68,43],{}," API is designed for real-time speech-to-text conversion, making it ideal for applications that require instantaneous transcription of spoken language.",[60,71,73],{"id":72},"use-cases","Use Cases",[75,76,77,81,84],"ul",{},[78,79,80],"li",{},"Voice-controlled applications",[78,82,83],{},"Transcription services",[78,85,86],{},"Voice commands in applications",[60,88,90],{"id":89},"browser-support","Browser Support",[37,92,93],{},"Supported in modern browsers, including Chrome and Firefox, though support might vary.",[60,95,97],{"id":96},"output","Output",[37,99,100],{},"Transcribed text based on recognized speech, with events and callbacks for handling recognition results.",[60,102,104],{"id":103},"implementation","Implementation",[37,106,107,108,110],{},"Setting up an instance of ",[41,109,43],{},", attaching event listeners, and starting\u002Fstopping the recognition process.",[112,113,117],"pre",{"className":114,"code":115,"language":116,"meta":11,"style":11},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Example SpeechRecognition implementation\nconst recognition = new SpeechRecognition();\n\nrecognition.onresult = (event) => {\n  const transcript = event.results[0][0].transcript;\n  console.log('Transcription:', transcript);\n};\n\nrecognition.start();\n","javascript",[41,118,119,127,132,138,144,150,156,162,167],{"__ignoreMap":11},[120,121,124],"span",{"class":122,"line":123},"line",1,[120,125,126],{},"\u002F\u002F Example SpeechRecognition implementation\n",[120,128,129],{"class":122,"line":12},[120,130,131],{},"const recognition = new SpeechRecognition();\n",[120,133,135],{"class":122,"line":134},3,[120,136,137],{"emptyLinePlaceholder":19},"\n",[120,139,141],{"class":122,"line":140},4,[120,142,143],{},"recognition.onresult = (event) => {\n",[120,145,147],{"class":122,"line":146},5,[120,148,149],{},"  const transcript = event.results[0][0].transcript;\n",[120,151,153],{"class":122,"line":152},6,[120,154,155],{},"  console.log('Transcription:', transcript);\n",[120,157,159],{"class":122,"line":158},7,[120,160,161],{},"};\n",[120,163,165],{"class":122,"line":164},8,[120,166,137],{"emptyLinePlaceholder":19},[120,168,170],{"class":122,"line":169},9,[120,171,172],{},"recognition.start();\n",[60,174,176],{"id":175},"real-time-vs-offline-processing","Real-time vs. Offline Processing",[37,178,179],{},"Suited for real-time processing as it transcribes speech as it occurs.",[32,181,183],{"id":182},"mediarecorder-api","MediaRecorder API",[60,185,63],{"id":186},"purpose-1",[37,188,66,189,191],{},[41,190,47],{}," API is focused on recording audio and video streams, making it suitable for scenarios where capturing raw audio data for later use is required.",[60,193,73],{"id":194},"use-cases-1",[75,196,197,200,203],{},[78,198,199],{},"Audio recording applications",[78,201,202],{},"Voicemail services",[78,204,205],{},"Any scenario requiring capture and storage of audio data",[60,207,90],{"id":208},"browser-support-1",[37,210,211],{},"Widely supported in modern browsers, including Chrome, Firefox, Safari, and Edge.",[60,213,97],{"id":214},"output-1",[37,216,217],{},"Audio (and video) data saved as a media file, often in compressed formats like WebM or MP3.",[60,219,104],{"id":220},"implementation-1",[37,222,223,224,226],{},"Setting up a ",[41,225,47],{}," instance, defining the media type and format, specifying the source, and handling recording events.",[112,228,230],{"className":114,"code":229,"language":116,"meta":11,"style":11},"\u002F\u002F Example MediaRecorder implementation\nconst getUserMedia = navigator.mediaDevices.getUserMedia;\n\ngetUserMedia({ audio: true })\n.then((stream) => {\nconst mediaRecorder = new MediaRecorder(stream);\nconst chunks = [];\n\n    mediaRecorder.ondataavailable = (event) => {\n      if (event.data.size > 0) {\n        chunks.push(event.data);\n      }\n    };\n\n    mediaRecorder.onstop = () => {\n      const audioBlob = new Blob(chunks, { type: 'audio\u002Fwav' });\n      const audioUrl = URL.createObjectURL(audioBlob);\n      console.log('Audio URL:', audioUrl);\n    };\n\n    mediaRecorder.start();\n\n    \u002F\u002F Stop recording after 5000 milliseconds (5 seconds)\n    setTimeout(() => {\n      mediaRecorder.stop();\n    }, 5000);\n})\n.catch((error) => {\nconsole.error('Error accessing microphone:', error);\n});\n",[41,231,232,237,242,246,251,256,261,266,270,275,281,287,293,299,304,310,316,322,328,333,338,344,349,355,361,367,373,379,385,391],{"__ignoreMap":11},[120,233,234],{"class":122,"line":123},[120,235,236],{},"\u002F\u002F Example MediaRecorder implementation\n",[120,238,239],{"class":122,"line":12},[120,240,241],{},"const getUserMedia = navigator.mediaDevices.getUserMedia;\n",[120,243,244],{"class":122,"line":134},[120,245,137],{"emptyLinePlaceholder":19},[120,247,248],{"class":122,"line":140},[120,249,250],{},"getUserMedia({ audio: true })\n",[120,252,253],{"class":122,"line":146},[120,254,255],{},".then((stream) => {\n",[120,257,258],{"class":122,"line":152},[120,259,260],{},"const mediaRecorder = new MediaRecorder(stream);\n",[120,262,263],{"class":122,"line":158},[120,264,265],{},"const chunks = [];\n",[120,267,268],{"class":122,"line":164},[120,269,137],{"emptyLinePlaceholder":19},[120,271,272],{"class":122,"line":169},[120,273,274],{},"    mediaRecorder.ondataavailable = (event) => {\n",[120,276,278],{"class":122,"line":277},10,[120,279,280],{},"      if (event.data.size > 0) {\n",[120,282,284],{"class":122,"line":283},11,[120,285,286],{},"        chunks.push(event.data);\n",[120,288,290],{"class":122,"line":289},12,[120,291,292],{},"      }\n",[120,294,296],{"class":122,"line":295},13,[120,297,298],{},"    };\n",[120,300,302],{"class":122,"line":301},14,[120,303,137],{"emptyLinePlaceholder":19},[120,305,307],{"class":122,"line":306},15,[120,308,309],{},"    mediaRecorder.onstop = () => {\n",[120,311,313],{"class":122,"line":312},16,[120,314,315],{},"      const audioBlob = new Blob(chunks, { type: 'audio\u002Fwav' });\n",[120,317,319],{"class":122,"line":318},17,[120,320,321],{},"      const audioUrl = URL.createObjectURL(audioBlob);\n",[120,323,325],{"class":122,"line":324},18,[120,326,327],{},"      console.log('Audio URL:', audioUrl);\n",[120,329,331],{"class":122,"line":330},19,[120,332,298],{},[120,334,336],{"class":122,"line":335},20,[120,337,137],{"emptyLinePlaceholder":19},[120,339,341],{"class":122,"line":340},21,[120,342,343],{},"    mediaRecorder.start();\n",[120,345,347],{"class":122,"line":346},22,[120,348,137],{"emptyLinePlaceholder":19},[120,350,352],{"class":122,"line":351},23,[120,353,354],{},"    \u002F\u002F Stop recording after 5000 milliseconds (5 seconds)\n",[120,356,358],{"class":122,"line":357},24,[120,359,360],{},"    setTimeout(() => {\n",[120,362,364],{"class":122,"line":363},25,[120,365,366],{},"      mediaRecorder.stop();\n",[120,368,370],{"class":122,"line":369},26,[120,371,372],{},"    }, 5000);\n",[120,374,376],{"class":122,"line":375},27,[120,377,378],{},"})\n",[120,380,382],{"class":122,"line":381},28,[120,383,384],{},".catch((error) => {\n",[120,386,388],{"class":122,"line":387},29,[120,389,390],{},"console.error('Error accessing microphone:', error);\n",[120,392,394],{"class":122,"line":393},30,[120,395,396],{},"});\n",[60,398,176],{"id":399},"real-time-vs-offline-processing-1",[37,401,402],{},"Can be used for both real-time recording and offline processing, as recorded data can be saved and processed later.",[32,404,406],{"id":405},"conclusion","Conclusion",[37,408,409,410,44,412,414,415,417,418,420],{},"In conclusion, the choice between ",[41,411,43],{},[41,413,47],{}," depends on the specific requirements of your application. If real-time speech-to-text conversion is crucial, the ",[41,416,43],{}," API is the go-to option. On the other hand, if you need to capture and store audio for playback or further processing, the ",[41,419,47],{}," API is more suitable. Ensure to consider browser support and potential fallbacks based on your application's needs.",[422,423,424],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":11,"searchDepth":12,"depth":12,"links":426},[427,428,429,430],{"id":34,"depth":134,"text":35},{"id":57,"depth":134,"text":58},{"id":182,"depth":134,"text":183},{"id":405,"depth":134,"text":406},"2023-12-02","Explore the distinctions between the SpeechRecognition and MediaRecorder APIs in web browsers with our latest blog post. Discover their unique purposes, use cases, and implementation details. Whether you're interested in real-time speech-to-text conversion or capturing and storing audio data, this comparison will guide you in choosing the right API for your web application. Dive into the world of audio processing and make informed decisions based on browser support, output formats, and more.","\u002Farticles\u002Fimages\u002Fspeechrecognition_2.png",{},"\u002Farticles\u002F2023_browseraudiooptions",{"title":27,"description":432},"articles\u002F2023_BrowserAudioOptions",[439,18],"chrome","gpob4_4BcdcvaPduD0f1E6PeB04iS3OJ2TTnmFKFxB0",1781574760894]