Videojs Audio Playback

Chromecast Support

Playing audio through Videojs and Nuevo plugin

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 on iOS device <audio> element use pseudo fullscreen, while <video> video element use native fullscreen. 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 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 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.

Audio media playback is supported by Chromecast plugin by Nuevodevel.com through MUSIC_TRACK Metadata type.
You can add audio media items to the playlist and even mix it with video items. You can test such mixed audio/video playlist here.

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