Videojs Audio Playback

STANDARD

PREMIUM

GOLD

Audio playback presentation

Not much has been explained about playing audio media files through video.js html5 player. Yes, video.js player can play audio content supported by HTML5 <audio> and <video> tags. You can check supported audio formats on Wikipedia

Code snippet

<audio id="my_player" class="video-js" poster="//path-to-poster.jpg" controls preload="auto" playsinline width="600" height="360">
<source src="//path-to-audio-file.mp3" type="audio/mp3">
</audio>

The difference between using <audio> instead of <video> tag is that poster image is never hidden and that <audio> element on iOS device use pseudo full screen, while <video> video element uses native full screen. Unfortunately, it is not possible to display text track captions (subtitles) on iOS devices for audio content.

Nuevo plugin has an extra audioInfo option, that you can add along other plugin options. It allows to define song information, like album cover, artist, song title, genre and release date. Certainly it makes your player layout more attractive. Additionally, audio info element can be clickable and link to any URL. Finally, audio content can stream through our updated Chromecast plugin and the cover image will be shown if only defined.

Code snippet

<audio id="my_player" class="video-js" poster="//path-to-poster.jpg" controls preload="auto" playsinline width="600" height="360">
<source src="//path-to-audio-file.mp3" type="audio/mp3">
</audio>
<script>
var audio_info = {
url: "//url-to-desired-website-url.com",
cover: "//path-to-cover-image.jpg",
artist: "Artist name",
title: "Song title",
album: "Album name",
genre: "Song genre",
year: "2020"

};var player = videojs("my_player");
player.nuevo({ audioInfo: audio_info )}
</script>

The cover image should be the same width and height. In order to keep good quality image when casting audio through Chromecast device, cover image should be enough big resolution, e.g. 720x720 pixels.
If audioInfo url defined, info element becomes a clickable link to a desired website URL.

Of course, you do not need to use audio info options at all. You can use video info options instead, or prepare informative poster image for the audio track. The downside of not using audio info is that you will not see audio track details, background and album images when streaming through Chromecast.

Audio layout can be enriched with an audio visualizer plugin by Gold and Premium Plan Nuevo plugin license holders. Visualizer plugin automatically detects audio content. Visualizer works on browsers with Web Audio API. The plugin features few options, but is easy to setup. It is fully described on this page.

* Demo song in the example above is by Maciej, the son of his proud dad, leading member of Nuevo Development Team.