1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>IAMF Binaural Web Demo</title> 6 <link 7 rel="stylesheet" 8 href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600" 9 /> 10 <link rel="stylesheet" href="styles.css" /> 11 </head> 12 <body> 13 <div class="container"> 14 <h1>IAMF Binaural Web Demo</h1> 15 16 <div class="card"> 17 <img 18 src="./data/iamf_logo_transparent.png" 19 alt="The letters IAMF next to a triangular purple, green, and yellow logo which is a modification of the Alliance for Open Media logo." 20 /> 21 <h2>What is IAMF?</h2> 22 <p> 23 <a href="https://aomediacodec.github.io/iamf/v1.0.0-errata.html">IAMF</a> is a new open 24 source spatial audio format from 25 <a href="https://aomedia.org/iamf/">Alliance for Open Media</a> that enables immersive 26 audio experiences. IAMF specifies the audio compression and rendering that every 27 compatible device should implement, from living-room devices to mobile and web. 28 </p> 29 </div> 30 <div class="card"> 31 <h2>About this demo</h2> 32 <p> 33 This is a demo of the 34 <a href="https://github.com/AOMediaCodec/libiamf" target="_blank">libiamf decoder</a> 35 compiled into WebAssembly and decoding IAMF in the browser. 36 </p> 37 <p> 38 To get the spatial, binaural audio experience and hear the direction of sounds, you need 39 to both use <b>headphones</b> and to use an IAMF file that has the 40 <code 41 ><a 42 href="https://aomediacodec.github.io/iamf/#headphones_rendering_mode" 43 target="_blank" 44 >headphones_rendering_mode</a 45 ></code 46 > 47 set to <code>HEADPHONES_RENDERING_MODE_BINAURAL</code>. 48 </p> 49 <p> 50 Our team keeps on improving the binaural rendering quality and will update the demo as 51 work progresses. 52 </p> 53 <p>Things to listen for:</p> 54 <ul> 55 <li> 56 Regular stereo playback in headphones is often described as hearing the sounds "inside 57 your head" or "between your ears." 58 </li> 59 <li> 60 Binaural playback creates the perception of sounds originating outside your head, 61 similar to natural hearing. 62 </li> 63 <li> 64 Sounds will be perceived as having directionality, such as behind, above, below, or even 65 moving around you. 66 </li> 67 <li> 68 IAMF can utilize ambisonic sound fields, creating a spherical auditory experience. Some 69 audio samples will effectively demonstrate this immersive sound sphere. 70 </li> 71 </ul> 72 <p>How to run the demo:</p> 73 <ul> 74 <li> 75 Choose a file from the dropdown menu to start decoding. (Please be patient as decoding 76 time may vary depending on your machine's processing power and the file's length and 77 type of content.) Alternatively, you can drag and drop your own IAMF file for decoding. 78 </li> 79 <li> 80 With your headphones on, play the stereo and binaural versions to hear the differences 81 in immersion, directionality, and fullness. 82 </li> 83 </ul> 84 85 <p>Questions or feedback: <a target="_blank" href="https://github.com/AOMediaCodec/iamf-tools/issues/new?title=[Web%20demo]%20%28Put%20a%20short%20title%20here%29&body=Please%20describe%20in%20detail:%0A-%20What%20did%20you%20do?%0A-%20What%20happened?%0A-%20What%20did%20you%20expect?">Please file an issue on GitHub</a>.</p> 86 </div> 87 <div class="card"> 88 <h2>Settings</h2> 89 <div class="dropdown"> 90 <label for="demoFile">Select a demo file</label><br /> 91 <select id="demoFile" name="demoFile"> 92 <option disabled selected value> 93 (Select a demo file here or drop your own file below.) 94 </option> 95 <option value="Animated demo (3rd-order ambisonics)"> 96 Animated demo (3rd-order ambisonics) 97 </option> 98 <option value="Animated demo (3rd-order ambisonics + stereo)"> 99 Animated demo (3rd-order ambisonics + stereo) 100 </option> 101 </select> 102 </div> 103 <label for="fileDrop">Or drag and drop an audio IAMF file</label><br /> 104 <div id="fileDrop">Drag and drop here</div> 105 <p> 106 Note: Only standalone .iamf files are supported and very large files (> 1GB) may exhaust 107 the browser sandbox's memory. 108 </p> 109 <br /> 110 <div> 111 <input type="checkbox" id="advancedSettingsCheckbox" name="advancedSettingsCheckbox" /> 112 <label for="advancedSettingsCheckbox">Advanced settings</label> 113 <div id="advancedSettings" hidden="true"> 114 <h2>Advanced settings</h2> 115 <p> 116 These settings are for debugging and testing purposes. Changing some settings may have 117 unintended consequences, for example, setting a higher output sample rate than used in 118 the input file will result in upsampling. 119 </p> 120 <div class="dropdown"> 121 <select id="outputSampleRate" name="outputSampleRate"> 122 <option value="16000">16000</option> 123 <option value="24000">24000</option> 124 <option value="48000" selected="selected">48000</option> 125 </select> 126 <label for="outputSampleRate">Output sample rate</label> 127 </div> 128 <p> 129 By checking this box, you can access the stereo and binaural audio elements directly 130 to, most usefully, download audio. 131 </p> 132 <input 133 type="checkbox" 134 id="showAudioElementsCheckbox" 135 name="showAudioElementsCheckbox" 136 /> 137 <label for="showAudioElementsCheckbox">Show audio elements</label> 138 </div> 139 </div> 140 </div> 141 <div class="card"> 142 <h2>Audio Playback</h2> 143 <p>After a file is finished decoding, you can listen to the results here.</p> 144 <p> 145 You can click the [Stereo] and [Binaural] buttons to switch between the binaural and 146 stereo versions and hear the difference in spatalization. 147 </p> 148 <p> 149 Clicking on the waveform/timeline allows you to jump to a particular point and clicking 150 and dragging allows you to select a section for looping. 151 </p> 152 <p>Remember to use headphones!</p> 153 <video id="videoPlayback" hidden="true"></video> 154 <canvas id="timelineCanvas" width="932" , height="120"></canvas> 155 <div class="flexBox"> 156 <div class="audioDiv"> 157 <button id="stereoButton">Stereo</button> 158 <audio id="stereoPlayback"></audio> 159 </div> 160 <button id="playPauseButton" disabled="true"></button> 161 <div class="audioDiv"> 162 <button id="binauralButton">Binaural</button> 163 <audio id="binauralPlayback"></audio> 164 </div> 165 </div> 166 </div> 167 <div class="card" id="logBox"></div> 168 <div class="fineprint" id="fineprint"><p>Built 2024-10-18 14:04:01 UTC - Renderers: <a href="https://resonance-audio.github.io/resonance-audio/">Resonance Audio</a> and <a href="https://github.com/ebu/bear">BEAR</a></p></div> 169 </div> 170 <script src="./decoder/wasm/wrapper.js"></script> 171 <script src="./app_bundle.js"></script> 172 </body> 173</html> 174
