You currently have JavaScript disabled on your browser.

This website uses JavaScript, and This page needs JavaScript activated to work correctly.

Please active JavaScript on your browser and then refresh this page.

adThumb

Word Search Spring Edition

$8.24      buyNow
Over 150 fun challenging family friendly Word Search puzzles (with answer sheets). This Spring Edition is loosely based on the "National Day Of" themes for the Spring months of March, April, and May. Two puzzles per day, One puzzle per page in efforts to reduce crowding which offers you large print for easier reading. Minimum of 40 words per puzzle. Answer sheets for each puzzle are provided in the back of the book. Fun for yourself and for the entire family.

Audio Player




In this blog post I am referring to the Audio Player feature that is available with HTML/HTML5.

The audio element is used to play audio files (MP3, OGG, or WAV) from a web page.


Example Source Code

In the following example, I use the audio element to play an m4a audio sound track (as an mp3). I set the controls attribute to have the element automatically add player controls (play, pause, volume):

 

    <audio controls style="height:22px;">
        <source src="SoundTrack01.m4a" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>

In the event that the users web browser does not support the audio element, you can either display a message to them (as in the example above) or you can provide them with an alternative method of playing the audio sound file, such as in the following example:

 

    <audio controls style="height:22px;">
        <source src="SoundTrack01.m4a" type="audio/mp3">
        <a href="SoundTrack01.m4a" target="_blank">
            <img src="speaker32x32.png" alt="audio track">
        </a>
    </audio>

When you run the above example then you should see something similar to the following screenshot image (unless your web browser does not support the audio element):

example3

The actual source code from the example shown above used in this web page is as follows:



Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

 
(0)   (0)

grayStargrayStargrayStargrayStargrayStar  Be the first to rate this post

User Comments






TJDivisions© 2023