Skip to main content
Version: 4.12.7

How to make an audio-only player

This article will tell you how to manipulate THEOplayer (Web) to make an audio-only interface, using only CSS and JavaScript. This applies also to mobile SDKs, where CSS and javascript can be injected (see Resources).

Going from this Audio Only

to this

Audio Only

SDKs​

Web SDKAndroid SDKiOS SDKtvOS SDKAndroid TV SDKChromecast SDK
YesUnverified / Through CSS and JavaScript injectionUnverified / Through CSS and JavaScript injectionNoUnverified / Through CSS and JavaScript injectionN/A

Making the audio player from the video player​

This section explains how to alter the default video player UI into the UI shown in the picture below, thus transforming a default THEOplayer instance in an audio player. This can, of course, be further customised to your liking to adapt to the rest of your implementation.

Audio Only

The alteration involves 8 steps:

  1. Add a new class to 2 HTML elements in the player (JavaScript)
  2. Hide unnecessary buttons from the control bar (CSS)
  3. Hide content that might appear above the control bar (CSS)
  4. Decrease the player's height (CSS)
  5. Ensure the control bar is always visible (CSS)
  6. Rescale the loading spinner (CSS)
  7. Change appearance for when the stream is not yet loaded (CSS)
  8. (Optional) Add the audioOnly flag (JavaScript)

In the following, you can find a description and a code example for each step.

Code examples​

Web SDK​

1 - Add a new class to 2 HTML elements in the player​

To comfortably provide the required CSS during the next steps, we add CSS classes to two HTML elements, respectively:

  1. 'audioplayer' to the player element (select it using the 'vjs-fluid' class)
  2. 'audiocontrol' to the controls element (select it using the 'vjs-control-bar' class)
function transformPlayer(forAudio) {
  var player = document.querySelector('.vjs-fluid');
  var controlbar = document.querySelector('.vjs-control-bar');
  if (forAudio) {
    player.classList.add('audioplayer');
    controlbar.classList.add('audiocontrol');
  } else {
    player.classList.remove('audioplayer');
    controlbar.classList.remove('audiocontrol');
  }
}

2 - Hide unnecessary buttons from the control bar​

There are a bunch of buttons in the control bar that might not be relevant for an audio-only stream. Hence, we hide the following buttons using CSS:

  • Subtitles button
  • Quality label
  • Audio menu
  • Settings menu
  • Fullscreen control
  • Cast button
.audiocontrol .vjs-icon-subtitles,
.audiocontrol .theo-quality-label,
.audiocontrol .vjs-icon-audio,
.audiocontrol .vjs-icon-cog,
.audiocontrol .vjs-fullscreen-control,
.audiocontrol .theo-cast-button,
.audioplayer video {
  display: none !important;
}

3 - Hide content that might appear above the control bar​

Now we need to make sure no content appears above our controls. Again, we use CSS to hide elements:

  • Poster image
  • Video
  • Metadata (like song info)
.audiocontrol .theoplayer-poster,
.audiocontrol .song-info,
.audioplayer video {
  display: none !important;
}

4- Decrease the player's height​

Next up, decreasing the player height to 50px.

.audioplayer {
  padding: 0 !important;
  height: 50px !important;
}

5 Ensure the control bar is always visible​

By default, the control bar fades away to ensure better user experience for the video viewer. The following snippet ensures that the controls stay always visible.

.audiocontrol.vjs-control-bar {
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
}

6 - Rescale the loading spinner​

An optional step is to scale the loading icon that spins when the player stalls.

.audioplayer .vjs-loading-spinner {
  transform: scale(0.3) !important;
}

7 - Change appearance for when the stream is not yet loaded​

We're almost there. We just need to remove the giant play-button that shows when the video hasn't started yet.

:not(.vjs-has-started).audioplayer .vjs-big-play-button {
  display: none !important;
}

Should we stop here, the audio player would show 0:00 / 0:00 as time information, since the stream is not yet loaded. This looks a bit clumsy, so we can hide it until the stream has started.

:not(.vjs-has-started).audioplayer .vjs-current-time,
:not(.vjs-has-started).audioplayer .vjs-time-divider,
:not(.vjs-has-started).audioplayer .vjs-duration {
  display: none !important;
}

.vjs-has-started .vjs-current-time,
.vjs-has-started .vjs-time-divider,
.vjs-has-started .vjs-duration {
  display: flex !important;
}

Note: if you preload the source (see Resources), hiding the time information before the player starts playing may not be needed, as the duration will be already available.

8 - (Optional) Add the audioOnly flag​

Finally, we recommend you to set the audioOnly flag to true in the player configuration. In that case, the player will use an audio element instead of a video element for media playback. This is only supported for HLS streams for now. Otherwise, the player uses a video element instead. This plays without any issue on most platforms, however we have noticed that Firefox doesn’t handle video elements with height and width 0 well.

const player = new THEOplayer.Player(element, {
  audioOnly: true,
});

Result​

You should end up with a player that looks like this:

Audio Only

You can further modify the audio player that you have at this point to better fit in your implementation.

Legacy Android SDK (4.12.x)​

The Web SDK code should be included in your Android (TV) project. The article at How to add CSS or JavaScript files to an Android/iOS projectexplains how you can add CSS and JavaScript files to your project.

Legacy iOS/tvOS SDK (4.12.x)​

The Web SDK code should be included in your iOS project. The article at How to add CSS or JavaScript files to an Android/iOS project explains how you can add CSS and JavaScript files to your project.

Sample application​

The demo below illustrates the transformation from video player to audio player.

Resources​