I was building a drum kit from the JavaScript 30 challenge with the help of the source code and I came across the code below, but I don't seem to understand how the div and audio were selected on the DOM using the template literals

const audio = document.querySelector(`audio[data-key="${e.keynote}"]`)
const key = document.querySelector(`div[data-key="${e.keynote}"]`)