Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Playing an MP3 with Video.js player
In this tutorial, we're going to learn how to play an mp3 file or an audio file using the video.js player. Playing an mp3 file using video.js is somewhat similar to playing an audio file in standard HTML5 but a few additional steps are required for video.js to support an mp3 file.
Advantages of using playing mp3 files using video.js
Using video.js to construct an mp3 player will provide you with more control over the audio file. All of the video.js-specific functions can be used on the audio, allowing for more flexibility.
How to Play Mp3 with video.js Player?
To create an audio player, we need to create an <audio> element and then add the video.js class to it. After that, the type of the audio file needs to be changed to the format of the file. For example − in our case, we are going to create an audio player for an mp3 file, so the type of our file in HTML will be "audio/mp3"
Now, let's have a look at an example to create a player that is going to play an mp3 file format.
Example
Consider the example given below −
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <audio class="video-js vjs-default-skin" id="audio_example" data-setup='{}' controls="true" preload="auto"> > <source src="https://www.tutorialspoint.com/videos/sample.mp3" type='audio/mp3' id='my_audio_file' > </audio> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
In the above example, we've done the following −
Included video.js using the CDN Url in the
attribute of the <link> tag. Inside the <body> part, an audio element has been created with the class as "video-js vjs-default-skin". This is going to use the video.js class the default skin of video.js for our video player. We've also given the 'id' as "audio_example" to the <audio> tag.
Next we've used data-setup='{}' on the audio tag to make sure that if our audio element is not preloaded by the browser as soon as the webpage is loaded, then video.js can load the audio element later.
controls='true' is going to show some basic play pause controls on our audio player.
In the <source> tag, we provided the path to the audio file "sample.mp3" and added the mime type of the file, i.e., "type=audio/mp3". Make sure to enter the path to your audio file while executing this example.
In the <script> tag, we've added the path of the video.js file to include it in our local project.
Execution of the above code will create an audio player in your browser which is going to play our audio file.
Points to Remember
Since an audio or mp3 file doesn't have many visuals and only the audio player controls will be shown in the browser. Hence, it is very important to use the "controls=true" attribute on the <audio> element, else your audio file will be hidden on your webpage.
Now that, we've seen how to play an mp3 file using video.js, I'll show you some more examples by extending the functionality of the audio player.
Adding an Image / Album Art to the mp3 File
Usually audio files don't have a visual element and hence our audio player just shows only controls to play and pause the audio file in the browser.
But we can also add an image poster or album art for that matter to our audio player for making it more appealing.
For adding an image element to the audio file, we must first adjust the audio player's height and width to accommodate the picture. Then, we need to pass the path to the image file in the "poster" attribute. The "Poster" attribute is only supported by the <video> tag if we use the standard HTML but because of video.js, the "poster" attribute can also be used for an audio file, giving you an option to add an album art over the mp3.
Example
Consider the example given below to add an image poster to the mp3 file,
<DOCTYPE html> <html> <head> <!link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <audio class="video-js vjs-default-skin" id="audio_example" width="560" height="300" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='{}' controls="true" autoplay="false" preload="auto" > <source src="https://www.tutorialspoint.com/videos/sample.mp3" type='audio/mp3' id='my_audio_file_1' > </audio> <script src="https://vjs.zencdn.net/7.19.2/video.min.js""> </script> </body> </html>
In the above code excerpt, we've first added an mp3 file and created an audio player for that file. Furthermore, we've also added the video.js class to the audio element.
Apart from that, 'height', 'width' and 'poster' attributes have been used to add the image poster over the mp3 file. The 'poster' attribute has the path to the album art for the audio and with height and width as "700", the dimension of the image poster has been defined.
Executing the above code will create an audio player in the browser which is going to play an mp3 file and an image poster of size "700×300" will be seen above the audio player controls.
Note − To run the above examples, replace the "src" value within the <source> element with the path to your mp3 files and replace the values of the "poster" attribute with an image file.
Conclusion
We learned how to play an mp3 file with the video.js package in this tutorial. Further, we also saw some examples of how to make an audio player with controls to play our mp3 files. In the last example, we looked at how to add an image poster to an audio file to make the audio player more user-friendly.
1K+ Views
