Update audio player example

Eliastik · Jan 13, 2025 · e7f9773 · e7f9773
1 parent 95aad02
commit e7f9773
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/example/audio-player.html b/example/audio-player.html
@@ -12,6 +12,12 @@ <h1>Example</h1>
     <input type="file" id="file-input" />
     <button type="button" id="validate-button">Validate</button>
   </form>
+  <p id="processing-audio" style="display: none;">
+    <label for="volume">Processing audio:</label>
+    <progress id="processing-progress" max="100" value="0"></progress>
+    <button type="button" id="cancel-button">Cancel</button><br />
+    <span id="processing-progress-remaining"></span>
+  </p>
   <p>
     <button type="button" id="play-button">Play</button>
     <button type="button" id="pause-button">Pause</button>

diff --git a/example/audio-player.js b/example/audio-player.js
@@ -1,9 +1,9 @@
-import { SoundStudioFactory, FilterNames } from "../dist/esm/SimpleSoundStudioLibrary.js";
+import { SoundStudioFactory, FilterNames, EventType } from "../dist/esm/SimpleSoundStudioLibrary.js";
 
 // Minimal example of using the library
 
 // Create a new instance of SoundStudio components (audioEditor for audio processing and editing, configService, etc.)
-const { audioEditor, audioPlayer, configService } = SoundStudioFactory.createNewInstance();
+const { audioEditor, audioPlayer, configService, eventEmitter } = SoundStudioFactory.createNewInstance();
 
 // Set base paths for worklet and worker files, as the default base path is incorrect (defaults to an empty string).
 configService.setWorkletBasePath("/dist/worklets/");
@@ -24,6 +24,12 @@ await audioEditor.changeFilterSettings(FilterNames.BASS_BOOST, {
 
 console.log("Bass booster settings:", audioEditor.getFiltersSettings().get(FilterNames.BASS_BOOST));
 
+// Listen to events from event emitter to get audio rendering state (progress)
+eventEmitter.on(EventType.STARTED_RENDERING_AUDIO, () => document.getElementById("processing-audio").style.display = "block");
+eventEmitter.on(EventType.UPDATE_AUDIO_TREATMENT_PERCENT, percent => document.getElementById("processing-progress").value = percent);
+eventEmitter.on(EventType.AUDIO_RENDERING_FINISHED, () => document.getElementById("processing-audio").style.display = "none");
+eventEmitter.on(EventType.UPDATE_REMAINING_TIME_ESTIMATED, estimatedTime => displayRemainingTime(estimatedTime));
+
 // The audio editor is now ready for audio processing
 
 document.getElementById("volume").value = audioPlayer.volume;
@@ -64,6 +70,31 @@ document.getElementById("validate-button").addEventListener("click", async () =>
     document.getElementById("validate-button").style.cursor = "";
 });
 
+function displayRemainingTime(estimatedTime) {
+    let estimatedText = "";
+
+    if (estimatedTime === -1) {
+        estimatedText = "Calculating processing time remaining...";
+    } else if (estimatedTime < 5) {
+        estimatedText = "A few seconds remaining";
+    } else {
+        // Arrondir au multiple de 5
+        const roundedTime = Math.round(estimatedTime / 5) * 5;
+        const minutes = Math.floor(roundedTime / 60);
+        const seconds = roundedTime % 60;
+
+        if(minutes > 0 && seconds > 0) {
+            estimatedText = `About ${minutes} minute${minutes > 1 ? "s" : ""} and ${seconds} second${seconds > 1 ? "s" : ""} remaining`;
+        } else if(minutes > 0) {
+            estimatedText = `About ${minutes} minute${minutes > 1 ? "s" : ""} remaining`;
+        } else {
+            estimatedText = `About ${seconds} second${seconds > 1 ? "s" : ""} remaining`;
+        }
+    }
+
+    document.getElementById("processing-progress-remaining").innerText = estimatedText;
+}
+
 document.getElementById("play-button").addEventListener("click", async () => {
     audioPlayer.start();
 });
@@ -80,3 +111,7 @@ document.getElementById("stop-button").addEventListener("click", async () => {
 document.getElementById("volume").addEventListener("input", async () => {
     audioPlayer.volume = parseFloat(document.getElementById("volume").value);
 });
+
+document.getElementById("cancel-button").addEventListener("click", async () => {
+    audioEditor.cancelAudioRendering();
+});