'Back-ticks for DOM query selector

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}"]`)


Sources

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

Source: Stack Overflow

Solution Source