Skip to main content

Audio-Only Player

This guide shows how to set up a player with audio-only assets via the BlendVision iOS 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 UniSourceConfig.posterSource, like the following snippet:

<style>
 #player-container video {
   background: no-repeat center / contain url(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​

A common method to use this object in iOS or tvOS is regarded as the backing layer for a UIView, as the following example shows:

/// A view that displays the visual contents of a player object.
class CustomView: UIView {

    // Override the property to make AVPlayerLayer the view's backing layer.
    override static var layerClass: AnyClass { AVPlayerLayer.self }

    // The associated player object.
    var player: AVPlayer? {
        get { playerLayer.player }
        set { playerLayer.player = newValue }
    }

    private var playerLayer: AVPlayerLayer { layer as! AVPlayerLayer }
}
Important
  • The value of a player layer’s inherited contents property is opaque and you can’t change it.

Setup​

// Define needed resources
guard let streamUrl = URL(string: "YOUR_HLS_URL")else {
    return
}

// Create player configuration
let playerConfig = UniPlayerConfig()
playerConfig.key = "YOUR_PLAYER_LICENSE_KEY"

// Create player based on player config
player = UniPlayerFactory.create(player: playerConfig)

// Create custom view and pass the player instance to it
let playerView = CustomView(player: player, frame: .zero)

// Listen to player events
player.add(listener: self)

playerView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
playerView.frame = view.bounds

view.addSubview(playerView)
view.bringSubviewToFront(playerView)

// Create source config
let sourceConfig = UniSourceConfig(url: YOUR_HLS_URL, type: .hls)

// Set poster url to posterSource of UniSourceConfig
sourceConfig.posterSource = URL(string: YOUR_IMAGE_URL)
player.load(sourceConfig: sourceConfig)
Limitation
  • Audio playback may not be available on Chromecast.

Specify the background modes your app requires​

Before your app can leverage one or more background execution modes, you need to declare the modes it requires by performing the following steps

  1. Select your project in Xcode’s Project Navigator.
  2. Select the app’s target in the Targets list.
  3. Click the Signing & Capabilities tab in the project editor.
  4. Find the Background Modes capability.
  5. Select one or more background execution modes via the corresponding checkboxes.
  6. For watchOS apps, choose the appropriate session type from the pop-up menu.