Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zirafa/pushtape-player.js
Customizable JS audio page player with global playback controls and autoscan (mutationobserver), built on Soundmanager2.
https://github.com/zirafa/pushtape-player.js
audio audio-player music-player player playlist soundmanager2
Last synced: 3 months ago
JSON representation
Customizable JS audio page player with global playback controls and autoscan (mutationobserver), built on Soundmanager2.
- Host: GitHub
- URL: https://github.com/zirafa/pushtape-player.js
- Owner: zirafa
- License: gpl-2.0
- Created: 2014-06-10T23:18:54.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-24T08:20:45.000Z (over 7 years ago)
- Last Synced: 2024-06-23T19:33:39.386Z (5 months ago)
- Topics: audio, audio-player, music-player, player, playlist, soundmanager2
- Language: JavaScript
- Homepage: http://zirafa.github.io/pushtape-player.js/demo/
- Size: 14.7 MB
- Stars: 28
- Watchers: 3
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-actionscript-sorted - pushtape-player.js - A customizable JS audio page player with global playback controls, based on Soundmanager2. (Multimedia / Sound)
README
Pushtape-player.js
===============
A customizable JS audio page player for the [Pushtape](http://www.pushtape.com) project, including global playback controls and various config options. Treats a page as a playlist of audio links. No dependencies other than [Soundmanager2](http://www.schillmania.com/projects/soundmanager2).
# Demo
Please visit http://zirafa.github.io/pushtape-player.js/demo for several examples of how the player can be customized.
# Installation
- Include soundmanager2.js and make sure the swf file path exists.
- Include pushtape-player.js.
- Initialize and setup your player (see below)
- Note that this needs to run on a web server (or locally) via a LAMP/MAMP stack. You'll probably run into flash permission issues otherwise.
# Example setup
```
/**
* Initialize Pushtape Player
*/
var pushtapePlayer = null; // Instance
soundManager.setup({
debugMode: false, // disable or enable debug output
url: 'swf/', // path to directory containing SM2 SWF
useHighPerformance: true, // keep flash on screen, boost performance
preferFlash: true, // for visualization effects (smoother scrubber)
flashVersion: 9,
wmode: 'transparent', // transparent SWF, if possible
onready: function() {
// Initialize pushtape player when SM2 is ready
pushtapePlayer = new PushtapePlayer();
pushtapePlayer.init({
playNext: true, // stop after one sound, or play through list until end
autoPlay: false, // start playing the first sound right away
repeatAll: false, // repeat playlist after last track
keyboardControl: true, // allow spacebar to toggle play-pause, right and left arrows to seek +/- 5 seconds
containerClass : '', // If empty, scan entire page for audio links. If set, limits the scope of search inside containerClass
autoScan : true, // Automatically observe changes to container and scan for new links to add to playlist
linkClass : '', // By default, add all links found. If set, will only add links with this class
addControlsMarkup: {
'enabled' : false,
'controlsMarkupClass' :'pt-controls-wrapper',
'position' : 'top'
} // If enabled = false (the default) you provide all markup in your HTML, otherwise set this to true and it will be dynamically inserted into controlsContainerClass.
});
},
ontimeout: function() {
// Could not start. Missing SWF? Flash blocked? Show an error, etc.?
console.log('Error initializing the Pushtape player.');
}
});
```
# Config options
Option | Type | Default | Description
------- | ---- | ------- | -----------
playNext | boolean | true | Stop after one sound, or play through list until end
autoPlay | boolean | false | Start playing the first sound right away
repeatAll | boolean | false | Repeat playlist from beginning after last track
keyboardControl | boolean | true | Enable keyboard shortcuts: spacebar toggles play-pause, right and left arrows seek +/- 5 seconds
containerClass | string | '' | Empty default scans entire page (document.body) for links, otherwise if set will only scan inside containerClass
autoScan | string | true | Automatically observe changes to container and scan for new links to add to playlist
linkClass | string | '' | Empty default will add all audio links found. If set to pushtape-player, will only add audio links that have the class, i.e.
addControlsMarkup.enabled | boolean | false | If true, global controls markup is dynamically inserted inside of containerClass
addControlsMarkup.controlsMarkupClass | string | 'pt-controls-wrapper' | Wrapper class
addControlsMarkup.position | string | 'top' | Position the controls inside the top or bottom of the document or containerClass
# Autoscan
The autoscan feature is implemented as a mutationobserver, meaning that any DOM changes in the container element will trigger the player to rescan for new audio links and update the order of the playlist. This is useful for SPA (single-page-application) webapps and AJAX heavy websites, allowing the player to be a "drop in" seamless client-side solution in scenarios where otherwise you'd need to manually manage and update the player and playlist state.
# Data attributes
To keep track of links on a page, there are a few HTML data attributes that are used.
Data attribute | Type | Description
-------------- | ---- | ------------
data-pushtape-sound-id | string | A unique sound identifier used internally to keep track of sounds. You can manually set this on your links, otherwise one will automatically be generated per link found.
data-pushtape-index | integer | Automatically applied to all links found on a page and keeps track of the order that links should be played.
data-pushtape-current-sound-id | string | This is automatically assigned to the global playback button element so you know which sound is currently playing.
data-pushtape-current-index | integer | This is automatically assigned to the global playback button, useful for knowing where the playlist index is pointing.
data-pushtape-permalink | string | A URL intended to act as a permalink or to link to additional info about the current audio. The content of this string will be appended to the href of the global pt-permalink link.
# Style options
One of the design goals of this player was to make it extremely flexible to modify the look and feel of the global controls. You can use plain CSS to position and style the global controls however you'd like, and each audio link on the page is given special classes (.pt-link, .pt-playing, etc). I tried not to force or inject styles with javascript as much as possible, however in certain places it does happen (setting % width for .pt-position and .pt-loading, for instance).
You can add markup for the global controls on the page, or choose to use the default markup provided. (see config.addControlsMarkup above).
## Default global control classes
- .pt-play-pause
- .pt-next
- .pt-previous
- .pt-current-time
- .pt-duration
- .pt-scrubber
- .pt-statusbar
- .pt-position
- .pt-loading
- .pt-current-track-title
- .pt-permalink
## Default link classes
- .pt-link (default class, link is playable)
- .pt-loading (state: sound is loading)
- .pt-playing (state: sound is playing)
- .pt-buffering (state: sound is buffering)
- .pt-paused (state: sound is paused)
- .pt-error (state: sound failed to load)
Note: The body element and .pt-play-pause will also get link state classes.
## Utility classes
- .pt-hide (If playable links are found, this is removed. Used to hide global controls if no links found. )
- .pt-container (This is automatically applied to the container set by containerClass)
- .pt-play-all (Similar to .pt-play-pause class, but applies to current playlist context.)
## Default controls markup template
## Example template for playAll button
The optional "Play All" button differs from the more global "Play Pause" button in the following ways:
- If the last track in the playlist ends, pressing "Play All" will restart the playlist from the beginning, not replay the last track.
- If audio is playing that isn't in the page playlist, "Play All" is not aware of it. If pressed it will just play the first track in the playlist.
- If audio is playing and it exists in the page playlist, "Play All" and "Play Pause" will behave similarly.