Now Playing

This documentation refers to the properties and methods of this interface as accessed only through the "data-bind" html attribute used for interface theming. For information on how to access this interface and its properties using standard javascript code, have a look at our developer documentation.

The nowplaying() data-bind accessor will give you access to all of the information related to the currently playing/selected song from the application. With it, you can build themed content around the song the user is currently listening to and interacting with. We'll run through all of its properties to see what data is available and the ways you can use it.

Note: Flex will not process your "data-bind" attributes automatically. Refer to the security implications section of our theming guide for more information on how to enable and use the "data-bind" attribute safely on your website.

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!


Song Title: nowplaying().title String

This property provides access to the song title of the currently playing or active beat in the application.

Example:
Beat Name: <span data-bind="html: nowplaying().title">Loading...</span>

Note: You should use the "html" binding rather than the "text" binding since the song title will already be html encoded by the framework.


Song Producer: nowplaying().artist String

This property provides access to the name of the producer for the currently playing or active beat in the application.

Example:
Producer Name: <span data-bind="html: nowplaying().artist">Loading...</span>

Note: You should use the "html" binding rather than the "text" binding since the producer's name will already be html encoded by the framework.


Image: nowplaying().image String

This property provides access to the hosted url for the full size (250px by 250px) beat image of the currently playing or active beat in the application.

Example:
<img data-bind="attr: { src: nowplaying().image, title: nowplaying().title }, visible: true" style="display:none" />

You'll notice that we've added a couple of different bindings to our <img> tag in this example. Firstly, we bind the image url to the "src" attribute of the image, and we bind the beat title to the "title" attribute of the image so that both of those attributes stay updated to the the currently playing song. Secondly, we employ a little trick to prevent the image from looking broken when the page is first loaded (since it won't have a src attribute until the bindings are applied). We set the style of the image to "display:none" so that it is hidden by default, and then once the framework is loaded and the bindings are applied, the "visible:true" binding changes it's visibility back to visible.


Thumbnail: nowplaying().thumbnail String

This property provides access to the hosted url for the thumbnail size (50px by 50px) beat image of the currently playing or selected beat in the application.

Example:
<img data-bind="attr: { src: nowplaying().thumbnail }, visible: true" style="display:none" />

This binding technique is nearly identical to the one described above, the only difference is that we are using a smaller image and we are foregoing the image title binding.


Description: nowplaying().description String

This property provides access to the producer supplied description for the beat which is currently playing or selected in the application.

Example:
<div class="beat-description" data-bind="html: nowplaying().description"></div>

In this example, we're binding the beat description into a block level <div> element and we are using the "html" binding rather than the "text" binding because the framework already html encodes the beat description and delivers it in a pre-formatted html format.


Effects: nowplaying().effects String

This property contains a comma separated list of the effects designated by the producer as being used for the currently playing or selected beat.

Example:
Effects: <span data-bind="text: nowplaying().effects"></span>

Genres: nowplaying().genres String

This property contains a comma separated list of the genres designated by the producer for the currently playing or selected beat.

Example:
Genres: <span data-bind="text: nowplaying().genres"></span>

Hook: nowplaying().hook String

This property contains a comma separated list of the hook properties designated by the producer for the currently playing or selected beat.

Example:
Hook: <span data-bind="text: nowplaying().hook"></span>

Instruments: nowplaying().instruments String

This property contains a comma separated list of the instruments designated by the producer as being used in the currently playing or selected beat.

Example:
Instruments: <span data-bind="text: nowplaying().instruments"></span>

Mood: nowplaying().moods String

This property contains the mood designated by the producer for the currently playing or selected beat.

Example:
Mood: <span data-bind="text: nowplaying().moods"></span>

Tempo: nowplaying().tempo String

This property contains the tempo designated by the producer for the currently playing or selected beat.

Example:
Tempo: <span data-bind="text: nowplaying().tempo"></span>

Licensing: nowplaying().licensing Object

This property contains all of the pre-approved licensing options available for the currently playing or selected beat in the application. It can be used to build themed content around the available purchasing options for the "now playing" beat. It contains the following sub-properties:

Default: nowplaying().licensing.default Integer

This property is an integer value. It contains the index to the licensing option which the beat producer has chosen to be the preferred default purchasing option for the beat.

Example: View JS Fiddle

Recommended License: <span
data-bind="text: nowplaying().licensing.options[nowplaying().licensing.default].name">

</span>

Options: nowplaying().licensing.options Array

This property is an array value. It contains all of the individual pre-approved licensing options available for the currently playing or selected beat in the application.


nowplaying().licensing.options[index] Object

Each array item is an object which contains its own sub-properties:


Name: nowplaying().licensing.options[index].name String

This property contains the name of the license option


Terms: nowplaying().licensing.options[index].terms String

This property contains the abbreviated bullet point list of license rights and allowances. It is delivered by the framework in HTML format.


Description: nowplaying().licensing.options[index].description String

This property contains the full explanatory description of license rights and allowances. It is delivered by the framework in HTML format.


Files: nowplaying().licensing.options[index].files String

This property contains the description of files which will be delivered if the license is purchased.


Price: nowplaying().licensing.options[index].price String

This property contains the selling price of the license.


Example: View JS Fiddle
<ul class="all-licenses" data-bind="foreach: nowplaying().licensing.options">
  <li class="individual-license">
    <ul class="individual-license-details">
      <li>License Name: <span data-bind="text: name"></span></li>
      <li>License Price: <span data-bind="text: price"></span></li>
      <li>Terms: <span data-bind="html: terms"></span></li>
      <li>Description: <span data-bind="html: description"></span></li>
      <li>Delivery Files: <span data-bind="text: files"></span></li>
      <li><a href="#" data-bind="click: $root.cart.add">Add to Cart!</a></li>
    </ul>
  </li>
</ul>

In the example above, we are using a "foreach" binding in the "data-bind" attribute to populate our
<ul class="all-licenses"> element with a list of each individual license option. And you can see that we create a link that goes with each license option (using the "click" binding) which uses the "cart.add" convenience method of the framework to add the license to the shopping cart when the link is clicked. Pretty awesome right?


Ratings: nowplaying().ratings Object

The ratings property provides access to the public star rating statistics for the currently playing or selected beat.

Average Rating: nowplaying().ratings.average String

This property contains the percentage rating (between 0 and 100) of the beat based on the average of all the public star ratings given to the beat.
Example:

Average Rating:
<span data-bind="text: parseInt(nowplaying().ratings.average) + '%'"></span>

In the example above, we are simply showing the non-decimal percentage value of the overall beat rating and appending a percentage sign to the end for aesthetics. But it's also possible with a little logic to display the average rating in terms of a visual number of stars.

Visual Stars Example: View JS Fiddle

<i data-bind="css: { on: nowplaying().ratings.total >= 1 }" class="fwicon-star"></i>
<i data-bind="css: { on: nowplaying().ratings.average >
= 40 }" class="fwicon-star"></i>
<i data-bind="css: { on: nowplaying().ratings.average >= 60 }" class="fwicon-star"></i>
<i data-bind="css: { on: nowplaying().ratings.average >
= 80 }" class="fwicon-star"></i>
<i data-bind="css: { on: nowplaying().ratings.average >= 90 }" class="fwicon-star"></i>

Total Ratings: nowplaying().ratings.total String

This property contains the number of total individual ratings given to the beat in its lifetime.
Example:

Total Ratings: <span data-bind="text: nowplaying().ratings.total"></span>

Tags: nowplaying().tags Array

This property is an array of tags. It can be used the build themed content around the producer provided keyword tags for the currently playing or selected beat.

nowplaying().tags[index] String

Each array item is an individual descriptive tag given to the beat by the producer.

Examples:
Meta Tags: <span data-bind="html: nowplaying().tags.join(', ')"></span>
Meta Tag List:
<ul data-bind="foreach: nowplaying().tags">
  <li><span data-bind="html: $data"></span></li>
</ul>

Published Date: nowplaying().pubdate Integer

This property contains the datetime timestamp (already converted to milliseconds) which corresponds to the date and time when the beat was first added to the platform. It is provided as an integer value so that it can be manipulated and compared more easily. But this also means that to turn it into a human readable date/time, some additional processing must be done on the value via javascript.

Example:
Published: <span data-bind="text: showDate(nowplaying().pubdate)"></span>

<script type="text/javascript">
function showDate(datetime) {
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var date = new Date(datetime);
  return months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();
}
</script>

Playlist: nowplaying().playlist String

This property contains the internal id of the playlist that the currently playing or selected beat belongs to. Therefore it can also be used to determine which playlist is currently selected and also access the properties of that playlist.

Example:
Current Playlist:
<span data-bind="text: music.playlists[nowplaying().playlist].title"></span>

Playlist Index: nowplaying().playlistIndex Integer

This property contains the numerical index of the currently playing or selected beat in the playlist that it belongs to.

Example Usage:
Next Song:
<span data-bind="if: music.playlists[nowplaying().playlist] && music.playlists[nowplaying().playlist].media.length > nowplaying().playlistIndex + 1">
  <strong data-bind="html: music.playlists[nowplaying().playlist].media[nowplaying().playlistIndex + 1].title"></strong>
</span>

Producer ID: nowplaying().uid Integer

This property contains the unique producer id of the producer who the currently playing or selected beat belongs to. You can use this id to (possibly) access the producer object which contains more information about the producer.

Example Usage:
<!-- ko with: producers.byId[nowplaying().uid] -->
  Producer Logo: <img data-bind="attr: { src: banner_thumb, title: name }" />
<!-- /ko -->

It's important to note that the producer object may not be available for every producer. Producer objects are only loaded into the app for producers who are specifically named in playlist definitions. For example, if the app has a playlist that includes the beats from 3 specific producers, then those three producers will have producer objects available in the app. However, if the playlist is not limited to any specific producers (and therefore draws from all producers on Beat Brokerz), no individual producer objects will be loaded along with that playlist.


Song ID: nowplaying().nid Integer

This property contains the unique id of the currently playing or selected beat.