<%@ Page Title="Audio capture" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Audio capture - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Audio capture (microphone)</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Microphone source via <code>openAudioCapture()</code></div> <div class="demo-card-body"> <p class="demo-description"> Records from the user's microphone with a live VU meter for input-level feedback. Resolves with an opus-in-webm <code>File</code> on browsers that support it (most), or m4a / ogg as a fallback. Useful for voice notes, comment threads, podcast intake forms, accessibility transcription workflows.
 </p> <div class="demo-expect"><strong>What you should see:</strong> record microphone audio straight into the queue as a file - stop the recording, review, then upload. Disk picking works alongside.</div> <div class="card p-3 mt-3" style="background:#fff;border:1px solid #e2e8f0;"> <div class="d-flex flex-wrap gap-2 align-items-center"> <button id="audioCaptureBtn" type="button" class="btn btn-primary">Record audio</button> <span class="text-muted small">Max 60 seconds</span> </div> <div id="audioCaptureStatus" class="form-text" aria-live="polite"></div> <div id="audioUploader" class="mt-3"></div> </div> <script> (function () {
 function init() {
 if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 var uploader = AjaxUploader.create('#audioUploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: false
 });
 var captureButton = document.getElementById('audioCaptureBtn');
 var status = document.getElementById('audioCaptureStatus');
 function showCaptureError(err) {
 if (err && err.message === 'cancelled') return;
 if (status) status.textContent =
 (err && err.message) || 'Audio capture could not be started.';
 }
 if (!captureButton) return;
 captureButton.addEventListener('click', function () {
 if (status) status.textContent = '';
 if (!uploader || typeof uploader.openAudioCapture !== 'function') {
 showCaptureError(new Error('Audio capture is not available in this browser.'));
 return;
 }
 uploader.openAudioCapture({ maxDurationSec: 60 })
 .then(function (file) {
 if (uploader && typeof uploader.addFile === 'function') uploader.addFile(file);
 })
 .catch(showCaptureError);
 });
 }
 if (document.readyState !== 'loading') init();
 else document.addEventListener('DOMContentLoaded', init);
 })();
 </script> <div class="alert alert-info mt-3" role="alert"> <strong>Try it:</strong> grant microphone permission, click <strong>Record</strong>, watch the VU meter ride your input level. Click <strong>Stop</strong> to add the clip to the queue.
 </div> <h5 class="mt-4">JavaScript API</h5> <div class="code-panel">
<pre><code>uploader.openAudioCapture({
 maxDurationSec: 60, <span style="color:#94a3b8">// auto-stop</span> mimeType: 'audio/webm;codecs=opus', <span style="color:#94a3b8">// optional</span> fileName: 'voice-note.webm' <span style="color:#94a3b8">// optional</span>
}).then(function (file) {
 uploader.addFile(file);
});</code></pre> </div> <h5 class="mt-4">Output formats by browser</h5> <ul class="mb-3"> <li><strong>Chrome / Edge / Opera / Firefox:</strong> <code>audio/webm;codecs=opus</code> - small, high-quality, universally re-decodable.</li> <li><strong>Safari:</strong> <code>audio/mp4</code> (m4a) - server-side transcoding only required for downstream consumers that don't speak m4a.</li> <li><strong>Custom:</strong> pass <code>mimeType</code> to override the auto-pick.</li> </ul> <h5 class="mt-4">Auto-transcribe recipe</h5> <p>Pipe the captured file straight into a transcription endpoint via <code>taskComplete</code>:</p> <div class="code-panel">
<pre><code>uploader.on('taskComplete', function (task, result) {
 fetch('/api/transcribe', {
 method: 'POST',
 body: JSON.stringify({ fileGuid: result.fileGuid }),
 headers: { 'Content-Type': 'application/json' }
 }).then(function (r) { return r.json(); })
 .then(function (txt) {
 document.getElementById('transcriptOut').textContent = txt.text;
 });
});</code></pre> </div> </div>
</div> 
</asp:Content>
