'My JS playSound function isn't working when I press a key

I'm writing my Javascript KeyBoard Music Player. My Javascript function playSound doesn't work after pressing a key. How should I change this function? The browser devtools is signalling about two errors:

Blockquote

Uncaught (in promise) DOMException: The element has no supported sources;

Uncaught TypeError: Cannot read properties of null (reading 'classList') at playSound.

Blockquote

Here's my code:

function removeTransition(event) {
  if(event.propertyName !== 'transform') return event.target.classList.remove('playing');
}

function playSound(event) {
  const audio= document.querySelector(`audio[data-key="${event.keyCode}"]`);
  const key= document.querySelector(`div[data-key="${event.keyCode}"]`);
  if (!audio) return
  key.classList.add ('playing');
  audio.currentTime= 0;
  audio.play();
  }

const keys= Array.from(document.querySelectorAll('.key'));
keys.forEach((key) => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keyup', playSound);

Here's my HTML code:

<html>
  <head>
    <meta charset= "UTF-8">
    <meta name= "viewport" content="width=device-width, initial-scale=1.0">
    <title>KeyBoard Music</title>
  </head>
  <body>
    <div class="keys">
      <div data-key="65"  class="key">
        <kbd>A</kbd>
      </div>
      <div data-key="83" class="key">
        <kbd>S</kbd>
      </div>
      <div data-key="68" class="key">
        <kbd>D</kbd>
      </div>
      <div data-key="70" class="key">
        <kbd>F</kbd>
      </div>
      <div-data-key="71" class="key">
        <kbd>G</kbd>
      </div>
      <div data-key="72" class="key">
        <kbd>H</kbd>
      </div>
      <div data-key="74" class="key">
        <kbd>J</kbd>
      </div>
      <div data-key="75" class="key">
        <kbd>K</kbd>
      </div>
      <div data-key="76" class="key">
        <kbd>L</kbd>
      </div>
    </div>
    <audio data-key="65" src="https://music.yandex.ru/album/21557185/track/101921861?lang=en"></audio>
    <audio data-key="83" src="https://music.yandex.ru/album/168865/track/1704329?lang=en"></audio>
    <audio data-key="68" src="https://music.yandex.ru/album/439083/track/3905500?lang=en"></audio>
    <audio data-key="70" src="https://music.yandex.ru/album/3731841/track/2347643?lang=en"></audio>
    <audio data-key="71" src="https://music.yandex.ru/album/5670691/track/10892?lang=en"></audio>
    <audio data-key="72" src="https://music.yandex.ru/album/3534449/track/53121289?lang=en"></audio>
    <audio data-key="74" src="https://music.yandex.ru/album/9496062/track/61069534?lang=en"></audio>
    <audio data-key="75" src="https://music.yandex.ru/album/9496062/track/61069514?lang=en"></audio>
    <audio data-key="76" src="https://music.yandex.ru/album/5520153/track/33265818?lang=en"></audio>
  </body>
</html>

javascript

Solution 1:^[1]

The error states you didn't add any sources.

<audio data-key="76">
  <source src="https://music.yandex.ru/album/5520153/track/33265818?lang=en">
</audio>

Also, that source isn't valid because it is not a file, you just linked the track website. Also, adding the song to your website is illegal and classified as piracy.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ethry

'My JS playSound function isn't working when I press a key

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]