Unable to use voice-controlled audio player

[ashwathkris]

Description

---
title: "Home Based Exercise Program"
format: html
---

```{=html}
<div>
	<audio id="myAudio" controls>
		<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
		Your browser does not support the audio element.
	</audio>
</div>

<button id="startVoice" >Start Voice Control</button>

<script>
document.addEventListener("DOMContentLoaded", function() {
	// Get references to elements.
    const audioElement = document.getElementById("myAudio");
    const startButton = document.getElementById("startVoice");

	// Flag to ensure metadata is loaded.
	let metadataLoaded = false;
    audioElement.addEventListener("loadedmetadata", () => {
      metadataLoaded = true;
      console.log(`Metadata loaded. Duration: ${audioElement.duration.toFixed(2)} seconds.`);
    });

	// Check for Web Speech API support.
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
      alert("Your browser does not support the Web Speech API!");
      throw new Error("Web Speech API not supported");
    }

	// Set up speech recognition.
    const recognition = new SpeechRecognition();
    recognition.continuous = true;
    recognition.lang = "en-US";
    recognition.interimResults = false;

    // Debounce settings to avoid processing duplicate commands quickly.
    let lastCommand = "";
    let lastCommandTime = 0;
    const debounceDelay = 1000; // milliseconds

	function processCommand(transcript) {
      const now = Date.now();
      if (transcript === lastCommand && (now - lastCommandTime) < debounceDelay) {
        console.log(`Ignoring duplicate command: "${transcript}"`);
        return;
      }
      lastCommand = transcript;
      lastCommandTime = now;

      console.log(`Processing command: "${transcript}"`);

      // Ensure that the audio metadata is loaded.
      if (!metadataLoaded) {
        console.log("Audio metadata not loaded yet.");
        return;
      }

      if (transcript.includes("play")) {
        audioElement.play();
      } 
      else if (transcript.includes("stop")) {
        audioElement.pause();
      } 
      else if (transcript.includes("forward")) {
        const beforeTime = audioElement.currentTime;
        // Add 5 seconds but do not exceed the duration.
        const newTime = Math.min(audioElement.duration, beforeTime + 5);
        console.log(`Forward command: currentTime ${beforeTime.toFixed(2)} → ${newTime.toFixed(2)}`);
        audioElement.currentTime = newTime;
        audioElement.play();
      } 
      else if (transcript.includes("rewind") || transcript.includes("back")) {
        const beforeTime = audioElement.currentTime;
        // Subtract 5 seconds but do not go below 0.
        const newTime = Math.max(0, beforeTime - 5);
        console.log(`Rewind command: currentTime ${beforeTime.toFixed(2)} → ${newTime.toFixed(2)}`);
        audioElement.currentTime = newTime;
        audioElement.play();
      } 
      else {
        console.log(`Unrecognized command: "${transcript}"`);
      }
    }

	recognition.onresult = (event) => {
      // Process only the latest result.
      const resultIndex = event.resultIndex;
      const transcript = event.results[resultIndex][0].transcript.toLowerCase().trim();
      console.log(`Voice input: "${transcript}"`);
      processCommand(transcript);
    };

    recognition.onerror = (event) => {
      console.log(`Speech recognition error: ${event.error}`);
    };

    // Start recognition when user clicks the button.
    startButton.addEventListener("click", () => {
      recognition.start();
      console.log("Voice recognition started.");
    });
});

</script>
```



I am trying to create a voice-controlled audio player. The user's commands are recorded after he clicks on "Start Voice Control". The commands "play" and "stop" work as expected, but for commands "forward" or "rewind", instead of moving the currentTIme accordingly, the audio gets reset to 0 and starts playing from the beginning. FYI, the audio file is around 50 seconds long. I assume this is related to Quarto's rendering. Is there a solution for this? Thanks!

[mcanouil]

Why did you close the discussion?

I assume this is related to Quarto's rendering.

Before assuming, did you try your code outside of Quarto in a simple HTML page?

Also, take a look at the documentation on how to include raw code:

• https://quarto.org/docs/authoring/markdown-basics.html#raw-content
• https://quarto.org/docs/output-formats/html-basics.html#includes

Finally, could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[ashwathkris]

Yes, that's right. I apologize for not making it clear previously

[mcanouil]

What is it exactly that is working or not?
I get the exact same thing using:

• quarto preview to server the HTML page
• Using the "live preview" VSCode extension to serve the HTML
• Using file:// protocol (that's bad as it breaks many thing and should usually be avoided)

Voice recognition started.
Speech recognition error: network

[mcanouil]

Did you try serving your page on a web server via another tool?

python3 -m http.server

[ashwathkris]

Hi, I was able to resolve my issue. In my _quarto.yml file, I specified "instant: false" under format: html. This caused full page reloads and prevented my audio element from being re-initialized. Thank you so much for your help and time. I really appreciate it!