メインコンテンツまでスキップ

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.