I am currently getting this error on Google Chrome when trying to run a JS function that plays sound on a button click.

here is the code:

index.html

<button type="button" id="test-button">Test C Key</button>

index.js

function playNote() {
  let audio = new Audio('sounds/c-major.wav')
  audio.play()
  }

document.getElementById('test-button').addEventListener('click', playNote())

Error:

index.js:3 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 

Any advice on how to overcome this? I understand that it can't play automatically but I am using a button click for trigger.