Posts Tagged gist
Dynamically adjusting the tweet button
The Infinite Jukebox has a tweet button that allows you to tweet the URL of a song so you can share it with others. The recently added tuning feature encodes all of the tuning information into the URL, making it easy to share a ‘tuned’ infinite song. One challenge I encountered it making this work was dynamically changing the URL that the tweet button will ‘tweet’.
The ‘tweet’ button is a twitter supplied widget. When your page load, a script runs that finds the tweet button on the page and does a bunch of twitter magic to the button (for one thing, it turns the button into an iFrame). When you click the button, the twitter dialog has the URL ready to go. However, if the URL has been programmatically changed (as in my tuning feature), the tweet button won’t pick this up. To make this work, whenever you change the URL of the page, you need to remove the tweet button, re-attach it and then call twttr.widgets.load() to force the twitter button to update.
Here’s the gist:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| The tweet button: | |
| <span id='tweet-span'> | |
| <a href="https://twitter.com/share" id='tweet' | |
| class="twitter-share-button" | |
| data-lang="en" | |
| data-count='none'>Tweet</a> | |
| <script>!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> | |
| </span> | |
| <script> | |
| function tweetSetup() { | |
| $(".twitter-share-button").remove(); | |
| var tweet = $('<a>') | |
| .attr('href', "https://twitter.com/share") | |
| .attr('id', "tweet") | |
| .attr('class', "twitter-share-button") | |
| .attr('data-lang', "en") | |
| .attr('data-count', "none") | |
| .text('Tweet'); | |
| $("#tweet-span").prepend(tweet); | |
| tweet.attr('data-text', "#InfiniteJukebox of " + t.fixedTitle); | |
| tweet.attr('data-url', document.URL); | |
| twttr.widgets.load(); | |
| } | |
| </script> | |
| </body> |
Controlling the artist distribution in playlists
Posted by Paul in code, data, Music, The Echo Nest on January 12, 2012
The Echo Nest engineering team just pushed out a new feature giving you more control over the artist makeup in playlists. There is a new parameter to the playlist/static API called distribution that can be set to wandering or focused. When the distribution is set to wandering the artists will appear with approximately equal distribution in the playlist. If the distribution is set to focused artists that are more similar to the seed artists will appear more frequently. When combined with the variety parameter, you have excellent control over the number and distribution of artists in a playlist. If you want to create a playlist suitable for music discovery, create a playlist with high variety and a wandering distribution. If you want to create a playlist that more closely mimics the radio experience choose a low variety and a focused distribution.
I’ve put together a little demo that lets you create playlists with different levels of variety and distribution settings. The demo will create a playlist given a seed artist and show you the artist distribution for the playlist. Here’s the output of the demo with distribution set to focused:
You can see from the artist histogram that the playlist draws more from artists that are very similar to the seed artist (Weezer). Compare to these results from a wandering playlist with the same seed and variety:
You can see that there is flatter distribution of artists in the playlist. You can use variety and distribution to tailor playlists to the listener. For instance, you can give the Classic Rock Radio experience to a listener by setting variety to relatively low, setting the distribution to focused and seeding with a classic rock artist like Led Zeppelin. Here’s the artist distribution for the resulting playlist:
That looks like the artist rotation for my local classic rock radio.
Give the demo a try to see how you can use variety and distribution to match playlists to your listener’s taste. Then read the playlist API docs to see how to use the API to start incorporating these attributes into your apps.
The Demo: Playlist Distribution Demo (source)
Music Machinery 