how to use audio in svelte

1

Hi, How do I use audio properties such as ‘currentTime’ and ‘play’ in Svelte?
Thanks for any help

2

Hi @davidjm - do you have an example of your page that we can look at? JavaScript properties shouldn’t change when you are using Svelte. I am assuming you are using the audio API?

Thanks,
Kirupa :slight_smile:

3

Hi I’m trying to build this js30 drumkit using Sveltejs
Do i need to install, import or bind the audio?
I’m a complete newbi so I’m not clear on the concepts.

function playSound(e){
  // selects the audio element where data-key="e.keyCode"
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)

  //if there is no audio element with the corresponding keyCode, then don't do anything
  if(!audio) return;

  //else reset the audio time and play it
  audio.currentTime = 0
  audio.play()
}

Thanks for your help

4

Ah! Are you a newbie with Svelte or with JavaScript in general?

If it is the latter, I would suggest taking a few steps back and learning more of the fundamentals first. My free content here may be a good resource:

What you are doing in this code is getting a reference to the audio HTML element that is in your web page. The actual audio itself is specified in HTML where the src points to the file to play.

5

[quote=“davidjm, post:3, topic:660595”]

selects the audio element where data-key="e.keyCode"
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)

  //if there is no audio element with the corresponding keyCode, then don't do anything
  if(!audio) return;

  //else reset the audio time and play it
  audio.currentTim

[/quote]selects the audio element where data-key=“e.keyCode”
const audio = document.querySelector(audio[data-key="${e.keyCode}"])

//if there is no audio element with the corresponding keyCode, then don’t do anything
if(!audio) return;

//else reset the audio time and play it
audio.currentTim

6

selects the audio element where data-key=“e.keyCode”
const audio = document.querySelector(audio[data-key="${e.keyCode}"])

//if there is no audio element with the corresponding keyCode, then don’t do anything
if(!audio) return;

//else reset the audio time and play it
audio.currentTimo you have an example of your page that we can look at? JavaScript properties shouldn’t chan
ge when you are using Svelte. I am assuming you are using the audio API?