As the weeks go on, I am beginning to understand HTML a bit better than when I first started. Of course, I am no expert, but I do want to dive into easier ways for me as a beginner to get more comfortable with HTML. Watching Joseph Labrecque’s web course on Learning Web Audio and Video on LinkedIn was very informative about adding audio and videos in HTML.
When I think of audio and videos on the internet I think of the major sites like YouTube and Soundcloud. I wanted to try and be able to implement at least one of those onto this blog using HTML and found it very easy to do so. Before that, I still wanted to get better examples of the which attributes to use in HTML to add audio and videos.
A website I found very useful to was W3School.com. These 3 resources helped me be able to better understand how to tag audio and video into HTML as well as DOM references.
A few examples from the DOM Reference is that with the tags:
| Property | Description |
|---|---|
| audioTracks | Returns an AudioTrackList object representing available audio tracks |
| autoplay | Sets or returns whether the audio/video should start playing as soon as it is loaded |
| buffered | Returns a TimeRanges object representing the buffered parts of the audio/video |
I like seeing this because it helps me understand what phrases to code and what they mean. I think that is very useful resource to have when starting out coding especially with how confusing it can be at first. Knowing these tags and properties helped me look at the coding from Soundcloud to understand what was going on.
Below I have used HTML to insert this audio file.
Soundcloud
Soundcloud makes it really easy to get a code for HTML. All you have to do is click share, and then embed.
Under embed, it has the html code as well as the coloring theme you can make for the player. You can take that code and apply it to your HTML document and edit it however you’d like!
[soundcloud url=”https://api.soundcloud.com/tracks/994833652″ params=”color=#ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true” width=”100%” height=”400″ iframe=”true” /]
Let me know if these tips helped you out!
