# Backtracks Player

The Backtracks Player is a feature-rich and customizable embeddable audio player.

# Basic Usage

Embedding a Backtracks player looks a little something like this. Click the icon to expand code samples.

The script tag in the above example (click/tap ▾) is an optimized, async code snippet that can run multiple times on one page; it will never load the manager script more than once. Still, it's not strictly necessary to embed it more than once. The div above is what turns into a delicious player. Use the Embed overlay in the player widget itself to configure one of these babies, but for reference, some options are:

  • data-bt-embed: The URL of the media player to embed. This URL can load independently in a browser, but it loves being embedded.
  • data-bt-theme: The theme of the player. Can currently be light or dark.
  • data-bt-show-comments: Show comments by default on load. False by default.
  • data-bt-preview: Show comments by default in "preview mode". "Preview mode" in desktop players shows only the first line of a recent comment. No effect in mobile players.
  • data-bt-show-art-cover: Show the art cover next to the artist and title.

# Player

Player objects are created automatically on pageload. They have the following properties:

# getContainer()

Returns the HTML element of the div that was originally embeeded into.

# getFrame()

Returns the <iframe> element containing the player.

# getTrack()

Returns the track name of the player, e.g. /m/cold.

# get(property)

Returns the current value of a property in the player's underlying props driver.

# set(props)

Sets new values for properties in the player's underlying props driver., e.g. player.set({ showComments: true }).

# audio(props)

Sets new values for the audio in the player's underlying audio drivers, e.g. player.audio({ volume: 0.5, playbackRate: 1.5 }).

# play()

Plays the player. Equivalent to player.audio({ paused: false }).

# pause()

Pauses the player. Equivalent to player.audio({ paused: true }).

# Settings

Setting Type Description
allowFullscreen boolean
artist string
bgImg string
buyLabel string
buyUrl string
chapters JSON chapters and points of interest
commentAuthors JSON
comments string
disableClipSharing boolean
hideCommentEndTimes boolean
commentSocialSharing string
downloadUrl string
duration numeric duration in seconds
endTime numeric
floatingMode string auto or manual
floatingModePosition string topleft, topright, bottomleft, or bottomright
floatingModeWidth number width of the player in pixels/px for on-site floating mode
floatingModeZIndex number z-index of the player with other elements on a page for on-site floating mode
loadMode string hint-none or hint-metadata or hint-auto
loop boolean
overlay string info, share, embed, subscribe, or timline
primaryColor string valid CSS color like #2edbad
preview boolean
seo boolean
shareUrl string
showArtCover boolean
showCommentMarkers boolean
showComments boolean
showDescription boolean
socialExclude string
startTime numeric
subscribeOptions JSON
theme string
thumbAlt string
thumbSrc string
timecodeScrolling boolean
title string