Skip to main content

Audio-Only Player

This guide shows how to set up a player with audio-only assets via the BlendVision Web Player SDK. You can also check out the sample project for audio-only assets player.

For basic player SDK integration, you can refer to Getting Started.

Obvious difference from video playback

Background Image​

When playing an audio stream, by default, the background is black. You can customize the background image with CSS, like the following snippet:

<style>
 #player-container video {
   background: no-repeat center / contain url(YOUR_IMAGE_URL)
 }
</style>

<body>
  <div id="player-container">
  </div>
</body>

Quality Setting​

The quality setting applies for video streams with multiple bitrate variants and isn’t available for audio-only streams.

Custom UI

Plain JS​

We need media elements in HTML to play a stream. For audio playback, the media element and related UI can be hidden:

<body>
  <div id="player-container" style="display: none">
  </div>
</body>

You can add the custom player UI, and integrate the player. The following example shows how to integrate play, pause, and seek to UI funtion.

import {createPlayer} from '@blendvision/player'

// It inserts a video element to div id="player-container"
const player = createPlayer('player-container', {
  license, // license is not required when testing in local development environment
  source: [
    {
      type: 'application/dash+xml',
      src: 'YOUR_DASH_URL',
    },
    {
      type: 'application/x-mpegurl',
      src: 'YOUR_HLS_URL',
    }
  ],
})

// sync playing / paused state to your play / pause button
player.addEventListener('playbackStateChange', (event, state) => {
  playPauseButton.setPlaying(state !== 'paused')
})

playPauseButton.addEventListener('click', () => {
  if (playPauseButton.isPlaying()) {
    player.pause()
  } else {
    player.play()
  }
})

// sync current time to seekbar
player.addEventListener('timeupdate', () => {
  seekbar.setCurrentTime(player.getCurrentTime())
}, 1000)

seekbar.handleSeek = time => {
  player.seek(time)
}
Limitation
  • Audio playback may not be available on Chromecast.