Audio element and JS won't play audio

Design help Custom code
1

Hello all!

I’m having an issue with audio not wanting to play at all when a certain element is clicked. Was curious if anyone could take a look at my code and help me figure out why.

<audio id="audio" src="https://1drv.ms/u/s!Ai3bCaOlEP4CgQqqdt8RJDVYGwFE?e=GRaLIY">

<script>

  const audioElement = document.getElementById('audio');
  
  const playTag = document.querySelector('.airtag_component');

  playTag.addEventListener('click', function() {
    audioElement.play();
  });

</script>

The link is coming from an open link to my OneDrive… I also tried it with a Google Drive file and still had no luck.

2

Hi @Keithen,

You’ll need to make sure you’re using the .m4a file itself as the src and use the correct syntax.

Here’s an example:

<audio id="audio" src="https://filesamples.com/samples/audio/m4a/sample3.m4a"></audio>

<script>
const audioElement = document.getElementById('audio');

const playTag = document.querySelector('.airtag_component');

playTag.addEventListener('click', function () {
  audioElement.play();
});
</script>
3

That makes a lot more sense. How would I call out that specific file then without a share link?

4

Hi @Keithen,

You’d need to host it somewhere that allows you access to the file directly. Here’s a link I made in Amazon S3: https://mwwaws.s3.us-west-2.amazonaws.com/AirTag+Soundbite.m4a

I’d recommend setting up your own bucket but you can use mine to test if you like!

1 Like