When I worked on the drum kit project in JavaScript30, I came across two HTML elements that I’ve never used before, the kbd element and the audio element. Here’s a little information about them:
<kbd>
The kbd element in HTML represents user input, typically entered through a keyboard. It’s generally used to indicate that the text it contains is entered by the user or used to illustrate key combinations to execute a command. It is often displayed in a monospace font to make it stand out.
Here’s an example of how the kbd element could be used:
To save the file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>In this example, the kbd element is used to indicate that the user should press the “Ctrl” and “S” keys on their keyboard to save the file.
The kbd element is a inline element, which means it can be used within a block of text and does not take up the full width of the page. It’s often used in conjunction with other elements, such as the code element, to indicate that the text it contains is code or other types of user input.
Note in the above image how the “Ctrl” and “S” are displayed in monotype, and the rest of the text is in the default font.
<audio>
The audio element in HTML is used to embed audio files into an HTML document. It allows you to add audio to your web page and control how it’s played, such as whether it should start playing automatically or whether it should have controls for the user to start and stop the audio.
Here’s an example of how the audio element can be used:
<audio src="song.mp3" controls></audio>This will embed an audio file with the URL “song.mp3” into the HTML document and display controls for the user to play and pause the audio.
The audio element supports various attributes that can be used to customize its behavior. For example, the autoplay attribute can be used to make the audio start playing automatically when the page loads, and the loop attribute can be used to make the audio play repeatedly.
Note in the image above that I haven’t linked to an actual audio file, so the displayed duration is 0:00 instead of showing an actual track length.
In the JavaScript30 drum kit project, we manipulated the audio element using JavaScript after grabbing the correct element using a querySelector. One of the things we did was force playback to start from the beginning of a WAV file if that file was called again, using audio.currentTime = 0. Another thing we did was actually start playback using audio.play(). The MDN link below shows attributes and events that can be used to control aspects of the element.
REDO FROM START 