New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

picobel

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

picobel - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

209

cjs/picobel.js

@@ -54,6 +54,6 @@ 'use strict';

// in an array (for easy access).
let audioElements = findAudio();
var audioElements = findAudio();
// Get our data from those elements.
let data = getRawData(audioElements);
var data = getRawData(audioElements);

@@ -64,20 +64,20 @@ // Replace those elements with our own custom markup.

// Now we've placed our elements in the DOM, we can select them.
let wrappers = document.getElementsByClassName('customAudioPlayer');
let playPauseButtons = document.getElementsByClassName('playerTrigger');
let muteButtons = document.getElementsByClassName('songMuteButton');
let playPauseButtonsText = document.getElementsByClassName('buttonText');
let playTimer = document.getElementsByClassName('songPlayTimer');
let songLengthBox = document.getElementsByClassName('songDuration');
let titleDisplay = document.getElementsByClassName('titleDisplay');
let artistDisplay = document.getElementsByClassName('artistDisplay');
let progressBar = document.getElementsByClassName('songProgressSlider');
let playhead = document.getElementsByClassName('pseudoProgressPlayhead');
let indicator = document.getElementsByClassName('pseudoProgressIndicator');
let volumeControl = document.getElementsByClassName('songVolumeSlider');
let volumeDisplay = document.getElementsByClassName('songVolumeValue');
let volumeIndicator = document.getElementsByClassName('pseudoVolumeIndicator');
let volumePlayhead = document.getElementsByClassName('pseudoVolumePlayhead');
var wrappers = document.getElementsByClassName('customAudioPlayer');
var playPauseButtons = document.getElementsByClassName('playerTrigger');
var muteButtons = document.getElementsByClassName('songMuteButton');
var playPauseButtonsText = document.getElementsByClassName('buttonText');
var playTimer = document.getElementsByClassName('songPlayTimer');
var songLengthBox = document.getElementsByClassName('songDuration');
var titleDisplay = document.getElementsByClassName('titleDisplay');
var artistDisplay = document.getElementsByClassName('artistDisplay');
var progressBar = document.getElementsByClassName('songProgressSlider');
var playhead = document.getElementsByClassName('pseudoProgressPlayhead');
var indicator = document.getElementsByClassName('pseudoProgressIndicator');
var volumeControl = document.getElementsByClassName('songVolumeSlider');
var volumeDisplay = document.getElementsByClassName('songVolumeValue');
var volumeIndicator = document.getElementsByClassName('pseudoVolumeIndicator');
var volumePlayhead = document.getElementsByClassName('pseudoVolumePlayhead');
// Initialize the audio.
let myAudio = initAudio(data);
var myAudio = initAudio(data);

@@ -88,3 +88,3 @@ console.log('myAudio', myAudio);

// being played (defaulting to the first track in the DOM)
let currentSongIndex = 0;
var currentSongIndex = 0;

@@ -104,7 +104,7 @@ /**

// Get all the <audio> occurrences in the page.
let audioElements = document.getElementsByTagName('audio');
var audioElements = document.getElementsByTagName('audio');
// Save our audioElements as an array (so
// we can manipulate the DOM but still
// access our items).
let items = [].slice.call(audioElements);
var items = [].slice.call(audioElements);
return items;

@@ -117,6 +117,8 @@ }

function getRawData(_data) {
let output = _data.map(item => ({
preload: options.preload ? options.preload : item.preload,
url: item.src
}));
var output = _data.map(function (item) {
return {
preload: options.preload ? options.preload : item.preload,
url: item.src
};
});
return output;

@@ -127,8 +129,8 @@ }

function buildMarkup(_data) {
for (let i = 0; i < _data.length; i++) {
for (var i = 0; i < _data.length; i++) {
// Create a container for our new player
let newPlayer = document.createElement('div');
var newPlayer = document.createElement('div');
newPlayer.className = 'customAudioPlayer loading player_' + i;
// If the element has a valid class, add that to the player's wrapper
let className = audioElements[i].className;
var className = audioElements[i].className;
if (className !== '') {

@@ -142,3 +144,3 @@ _addClass(newPlayer, className);

// Create a loading indicator
let loading = document.createElement('div');
var loading = document.createElement('div');
loading.className = 'loader';

@@ -150,5 +152,5 @@ newPlayer.appendChild(loading);

// Create a play/pause button
let button = document.createElement('button');
var button = document.createElement('button');
button.className = 'playerTrigger';
let buttonText = document.createElement('span');
var buttonText = document.createElement('span');
buttonText.className = 'buttonText';

@@ -159,7 +161,7 @@ buttonText.innerHTML = 'play';

// Create a wrapper for our player's metadata
let meta = document.createElement('div');
var meta = document.createElement('div');
meta.className = 'metaWrapper';
// Create elements to display file metadata
let meta_title = document.createElement('span');
var meta_title = document.createElement('span');
meta_title.className = 'titleDisplay';

@@ -169,10 +171,10 @@ meta_title.innerHTML = 'File ' + (i + 1);

let meta_artist = document.createElement('span');
var meta_artist = document.createElement('span');
meta_artist.className = 'artistDisplay';
meta.appendChild(meta_artist);
let timings = document.createElement('div');
var timings = document.createElement('div');
timings.className = 'timingsWrapper';
let meta_timer = document.createElement('span');
var meta_timer = document.createElement('span');
meta_timer.className = 'songPlayTimer';

@@ -183,14 +185,14 @@ meta_timer.innerHTML = '0:00';

// Progress Indicator
let meta_progress_wrapper = document.createElement('div');
var meta_progress_wrapper = document.createElement('div');
meta_progress_wrapper.className = 'songProgressSliderWrapper';
let meta_pseudo_progress_background = document.createElement('div');
var meta_pseudo_progress_background = document.createElement('div');
meta_pseudo_progress_background.className = 'pseudoProgressBackground';
meta_progress_wrapper.appendChild(meta_pseudo_progress_background);
let meta_pseudo_progress_indicator = document.createElement('div');
var meta_pseudo_progress_indicator = document.createElement('div');
meta_pseudo_progress_indicator.className = 'pseudoProgressIndicator';
meta_progress_wrapper.appendChild(meta_pseudo_progress_indicator);
let meta_pseudo_progress_playhead = document.createElement('div');
var meta_pseudo_progress_playhead = document.createElement('div');
meta_pseudo_progress_playhead.className = 'pseudoProgressPlayhead';
meta_progress_wrapper.appendChild(meta_pseudo_progress_playhead);
let meta_progress = document.createElement('input');
var meta_progress = document.createElement('input');
meta_progress.type = 'range';

@@ -205,3 +207,3 @@ meta_progress.min = 0;

let meta_duration = document.createElement('span');
var meta_duration = document.createElement('span');
meta_duration.className = 'songDuration';

@@ -212,15 +214,15 @@ meta_duration.innerHTML = '-:--';

// Volume Indicator
let meta_volume = document.createElement('div');
var meta_volume = document.createElement('div');
meta_volume.className = 'songVolume';
let meta_mute = document.createElement('button');
var meta_mute = document.createElement('button');
meta_mute.className = 'songMuteButton';
meta_mute.innerHTML = 'Mute';
meta_volume.appendChild(meta_mute);
let meta_volume_label_wrapper = document.createElement('div');
var meta_volume_label_wrapper = document.createElement('div');
meta_volume_label_wrapper.className = 'songVolumeLabelWrapper';
let meta_volume_label = document.createElement('span');
var meta_volume_label = document.createElement('span');
meta_volume_label.className = 'songVolumeLabel';
meta_volume_label.innerHTML = 'Volume';
meta_volume_label_wrapper.appendChild(meta_volume_label);
let meta_volume_value = document.createElement('span');
var meta_volume_value = document.createElement('span');
meta_volume_value.className = 'songVolumeValue';

@@ -230,14 +232,14 @@ meta_volume_value.innerHTML = '10';

meta_volume.appendChild(meta_volume_label_wrapper);
let meta_volume_wrapper = document.createElement('div');
var meta_volume_wrapper = document.createElement('div');
meta_volume_wrapper.className = 'songVolumeSliderWrapper';
let meta_pseudo_volume_background = document.createElement('div');
var meta_pseudo_volume_background = document.createElement('div');
meta_pseudo_volume_background.className = 'pseudoVolumeBackground';
meta_volume_wrapper.appendChild(meta_pseudo_volume_background);
let meta_pseudo_volume_indicator = document.createElement('div');
var meta_pseudo_volume_indicator = document.createElement('div');
meta_pseudo_volume_indicator.className = 'pseudoVolumeIndicator';
meta_volume_wrapper.appendChild(meta_pseudo_volume_indicator);
let meta_pseudo_volume_playhead = document.createElement('div');
var meta_pseudo_volume_playhead = document.createElement('div');
meta_pseudo_volume_playhead.className = 'pseudoVolumePlayhead';
meta_volume_wrapper.appendChild(meta_pseudo_volume_playhead);
let meta_volume_control = document.createElement('input');
var meta_volume_control = document.createElement('input');
meta_volume_control.type = 'range';

@@ -271,4 +273,4 @@ meta_volume_control.min = 0;

function initAudio(_data) {
let _myAudio = _data.map((item, key) => {
let node = new Audio();
var _myAudio = _data.map(function (item, key) {
var node = new Audio();

@@ -327,7 +329,6 @@ // Apply the preload attr. if needed

// Fire this event when we can play the audio
// all the way through (ie. it is fully loaded)
function _canplaythrough() {
let index = this.getAttribute('data-song-index');
var index = this.getAttribute('data-song-index');
_setLengthDisplay(index);

@@ -342,8 +343,8 @@ _removeClass(wrappers[index], 'loading');

// Get the filename and type
let url = myAudio[i].src;
let fileType = _getFileType(url);
let fileName = _getFileName(url);
var url = myAudio[i].src;
var fileType = _getFileType(url);
var fileName = _getFileName(url);
// If there is a valid title, display that title...
let title = audioElements[i].title;
var title = audioElements[i].title;
if (title !== '') {

@@ -357,3 +358,3 @@ titleDisplay[i].innerHTML = title;

// If there is a valid 'artist', display the artist name.
let artist = audioElements[i].getAttribute('data-artist');
var artist = audioElements[i].getAttribute('data-artist');
if (artist !== '') {

@@ -382,3 +383,3 @@ artistDisplay[i].innerHTML = artist;

function pauseAll() {
for (let i = 0; i < data.length; i++) {
for (var i = 0; i < data.length; i++) {
myAudio[i].pause();

@@ -391,3 +392,3 @@ }

currentSongIndex = index;
for (let i = 0; i < data.length; i++) {
for (var i = 0; i < data.length; i++) {
if (i != index) {

@@ -402,6 +403,6 @@ myAudio[i].pause();

function sliderScrub() {
let value = this.value;
let index = this.parentNode.parentNode.parentNode.getAttribute('data-song-index');
let duration = myAudio[index].duration;
let targetTime = duration * (value / 100);
var value = this.value;
var index = this.parentNode.parentNode.parentNode.getAttribute('data-song-index');
var duration = myAudio[index].duration;
var targetTime = duration * (value / 100);
targetTime = targetTime.toFixed(2);

@@ -414,4 +415,4 @@ myAudio[index].currentTime = targetTime;

function volume() {
let value = this.value;
let index = this.parentNode.parentNode.parentNode.getAttribute('data-song-index');
var value = this.value;
var index = this.parentNode.parentNode.parentNode.getAttribute('data-song-index');
mute(index, false);

@@ -422,4 +423,4 @@ setVolume(index, value);

function setVolume(index, value) {
let valueMapped = value * 10;
let volumePercent = value * 100;
var valueMapped = value * 10;
var volumePercent = value * 100;
myAudio[index].volume = value;

@@ -434,3 +435,3 @@ volumeDisplay[index].innerHTML = valueMapped;

function mute(index, state) {
let oldVolume;
var oldVolume = void 0;
if (state) {

@@ -459,6 +460,6 @@ oldVolume = myAudio[index].volume;

function playPause(index, state) {
let buttonText = playPauseButtonsText[index];
let target = playPauseButtons[index];
var buttonText = playPauseButtonsText[index];
var target = playPauseButtons[index];
if (state) {
for (let i = 0; i < playPauseButtons.length; i++) {
for (var i = 0; i < playPauseButtons.length; i++) {
_removeClass(playPauseButtons[i], 'songPlaying');

@@ -482,6 +483,6 @@ _addClass(playPauseButtons[i], 'songPaused');

function _playPauseAudio() {
let targetSong = this.parentNode.getAttribute('data-song-index');
var targetSong = this.parentNode.getAttribute('data-song-index');
if (typeof targetSong != 'undefined') {
let playSong = _hasClass(this, 'songPlaying') ? false : true;
playPause(targetSong, playSong);
var _playSong = _hasClass(this, 'songPlaying') ? false : true;
playPause(targetSong, _playSong);
} else {

@@ -494,4 +495,4 @@ console.log('too soon to play!');

function _muteUnmuteAudio() {
let targetSong = this.parentNode.parentNode.getAttribute('data-song-index');
let buttonText = playPauseButtonsText[targetSong];
var targetSong = this.parentNode.parentNode.getAttribute('data-song-index');
var buttonText = playPauseButtonsText[targetSong];
if (_hasClass(this, 'songMuted')) {

@@ -512,3 +513,3 @@ mute(targetSong, false);

function _triggerUpdateProgress() {
let index = this.getAttribute('data-song-index');
var index = this.getAttribute('data-song-index');
_updateProgress(index);

@@ -519,5 +520,5 @@ }

function _updateProgress(index) {
let progress = myAudio[index].currentTime;
let duration = myAudio[index].duration;
let progressParsed = _parseTime(progress);
var progress = myAudio[index].currentTime;
var duration = myAudio[index].duration;
var progressParsed = _parseTime(progress);
playTimer[index].innerHTML = progressParsed;

@@ -527,3 +528,3 @@ if (progress >= duration) {

}
let progressPercent = (progress / duration * 100).toFixed(2);
var progressPercent = (progress / duration * 100).toFixed(2);
progressBar[index].value = progressPercent;

@@ -536,5 +537,5 @@ indicator[index].style.width = progressPercent + '%';

function _setLengthDisplay(index) {
let songLength = myAudio[index].duration;
let duration = _parseTime(songLength);
let songClass = '.song' + index;
var songLength = myAudio[index].duration;
var duration = _parseTime(songLength);
var songClass = '.song' + index;
songLengthBox[index].innerHTML = duration;

@@ -558,3 +559,3 @@ }

// console.log( e.type );
let index = this.getAttribute('data-song-index');
var index = this.getAttribute('data-song-index');
// console.log( myAudio[index].error );

@@ -565,4 +566,4 @@ // console.log(e);

function _error(e) {
let index = this.getAttribute('data-song-index');
let error = myAudio[index].error;
var index = this.getAttribute('data-song-index');
var error = myAudio[index].error;
// console.log( 'error: ' );

@@ -574,3 +575,3 @@ // console.log(e);

// console.log( 'stalled!' );
let index = this.getAttribute('data-song-index');
var index = this.getAttribute('data-song-index');
// console.log( 'Target: ' + index );

@@ -585,4 +586,4 @@ // console.log( 'Play?: ' + false );

function _progress(e) {
let index = this.getAttribute('data-song-index');
let readyState = myAudio[index].readyState;
var index = this.getAttribute('data-song-index');
var readyState = myAudio[index].readyState;
}

@@ -602,17 +603,17 @@

function _parseTime(seconds) {
let hours = Math.floor(seconds / 3600);
var hours = Math.floor(seconds / 3600);
let mins = Math.floor(seconds % 3600 / 60).toFixed(0).toString();
var mins = Math.floor(seconds % 3600 / 60).toFixed(0).toString();
let secs = Math.floor(seconds % 3600 % 60).toFixed(0).toString();
var secs = Math.floor(seconds % 3600 % 60).toFixed(0).toString();
// Left-pad seconds string if needed
secs = secs > 10 ? secs : `0${secs}`;
secs = secs > 10 ? secs : '0' + secs;
let parsedTime = `${mins}:${secs}`;
var parsedTime = mins + ':' + secs;
if (hours > 0) {
// Left-pad minutes string if needed
mins = mins > 10 ? mins : `0${mins}`;
parsedTime = `${hours}:${mins}:${secs}`;
mins = mins > 10 ? mins : '0' + mins;
parsedTime = hours + ':' + mins + ':' + secs;
}

@@ -625,3 +626,3 @@

function _hasClass(el, className) {
let result;
var result = void 0;
if (el.classList) {

@@ -660,4 +661,4 @@ result = el.classList.contains(className);

function _getFileName(string) {
let fullFileName = string.replace(/^.*[\\\/]/, '');
let withNoExtension = fullFileName.split('.')[0];
var fullFileName = string.replace(/^.*[\\\/]/, '');
var withNoExtension = fullFileName.split('.')[0];
return withNoExtension;

@@ -664,0 +665,0 @@ }

296

esm/picobel.js

@@ -32,4 +32,5 @@ /**

options = typeof options !== 'undefined' ? options : {};
// options.prefix = options.prefix || '';
options.theme = options.theme || 'defaultPlayerTheme';
// Setting a value for `preload` here will override the audio element's value.
options.preload = options.preload || false;

@@ -49,6 +50,6 @@ /**

// in an array (for easy access).
var audioElements = findAudio();
let audioElements = findAudio();
// Get our data from those elements.
var data = getRawData(audioElements);
let data = getRawData(audioElements);

@@ -59,24 +60,26 @@ // Replace those elements with our own custom markup.

// Now we've placed our elements in the DOM, we can select them.
var wrappers = document.getElementsByClassName('customAudioPlayer');
var playPauseButtons = document.getElementsByClassName('playerTrigger');
var muteButtons = document.getElementsByClassName('songMuteButton');
var playPauseButtonsText = document.getElementsByClassName('buttonText');
var playTimer = document.getElementsByClassName('songPlayTimer');
var songLengthBox = document.getElementsByClassName('songDuration');
var titleDisplay = document.getElementsByClassName('titleDisplay');
var artistDisplay = document.getElementsByClassName('artistDisplay');
var progressBar = document.getElementsByClassName('songProgressSlider');
var playhead = document.getElementsByClassName('pseudoProgressPlayhead');
var indicator = document.getElementsByClassName('pseudoProgressIndicator');
var volumeControl = document.getElementsByClassName('songVolumeSlider');
var volumeDisplay = document.getElementsByClassName('songVolumeValue');
var volumeIndicator = document.getElementsByClassName('pseudoVolumeIndicator');
var volumePlayhead = document.getElementsByClassName('pseudoVolumePlayhead');
let wrappers = document.getElementsByClassName('customAudioPlayer');
let playPauseButtons = document.getElementsByClassName('playerTrigger');
let muteButtons = document.getElementsByClassName('songMuteButton');
let playPauseButtonsText = document.getElementsByClassName('buttonText');
let playTimer = document.getElementsByClassName('songPlayTimer');
let songLengthBox = document.getElementsByClassName('songDuration');
let titleDisplay = document.getElementsByClassName('titleDisplay');
let artistDisplay = document.getElementsByClassName('artistDisplay');
let progressBar = document.getElementsByClassName('songProgressSlider');
let playhead = document.getElementsByClassName('pseudoProgressPlayhead');
let indicator = document.getElementsByClassName('pseudoProgressIndicator');
let volumeControl = document.getElementsByClassName('songVolumeSlider');
let volumeDisplay = document.getElementsByClassName('songVolumeValue');
let volumeIndicator = document.getElementsByClassName('pseudoVolumeIndicator');
let volumePlayhead = document.getElementsByClassName('pseudoVolumePlayhead');
// Initialize the audio.
var myAudio = initAudio(data);
let myAudio = initAudio(data);
console.log('myAudio', myAudio);
// Create a var to store the index of the file currently
// being played (defaulting to the first track in the DOM)
var currentSongIndex = 0;
let currentSongIndex = 0;

@@ -96,7 +99,7 @@ /**

// Get all the <audio> occurrences in the page.
var audioElements = document.getElementsByTagName('audio');
let audioElements = document.getElementsByTagName('audio');
// Save our audioElements as an array (so
// we can manipulate the DOM but still
// access our items).
var items = [].slice.call(audioElements);
let items = [].slice.call(audioElements);
return items;

@@ -108,12 +111,7 @@ }

// found by findAudio()]
function getRawData(data) {
var output = [];
for (var i = 0; i < data.length; i++) {
var item = {};
// Get the file's URL
item.url = data[i].src;
// Check for a audio tag's `preload` attribute
item.preload = options.preload ? options.preload : data[i].preload;
output.push(item);
}
function getRawData(_data) {
let output = _data.map(item => ({
preload: options.preload ? options.preload : item.preload,
url: item.src
}));
return output;

@@ -123,9 +121,9 @@ }

// Create our own markup in place of the native <audio> elements.
function buildMarkup(data) {
for (var i = 0; i < data.length; i++) {
function buildMarkup(_data) {
for (let i = 0; i < _data.length; i++) {
// Create a container for our new player
var newPlayer = document.createElement('div');
let newPlayer = document.createElement('div');
newPlayer.className = 'customAudioPlayer loading player_' + i;
// If the element has a valid class, add that to the player's wrapper
var className = audioElements[i].className;
let className = audioElements[i].className;
if (className !== '') {

@@ -139,3 +137,3 @@ _addClass(newPlayer, className);

// Create a loading indicator
var loading = document.createElement('div');
let loading = document.createElement('div');
loading.className = 'loader';

@@ -147,5 +145,5 @@ newPlayer.appendChild(loading);

// Create a play/pause button
var button = document.createElement('button');
let button = document.createElement('button');
button.className = 'playerTrigger';
var buttonText = document.createElement('span');
let buttonText = document.createElement('span');
buttonText.className = 'buttonText';

@@ -156,7 +154,7 @@ buttonText.innerHTML = 'play';

// Create a wrapper for our player's metadata
var meta = document.createElement('div');
let meta = document.createElement('div');
meta.className = 'metaWrapper';
// Create elements to display file metadata
var meta_title = document.createElement('span');
let meta_title = document.createElement('span');
meta_title.className = 'titleDisplay';

@@ -166,10 +164,10 @@ meta_title.innerHTML = 'File ' + (i + 1);

var meta_artist = document.createElement('span');
let meta_artist = document.createElement('span');
meta_artist.className = 'artistDisplay';
meta.appendChild(meta_artist);
var timings = document.createElement('div');
let timings = document.createElement('div');
timings.className = 'timingsWrapper';
var meta_timer = document.createElement('span');
let meta_timer = document.createElement('span');
meta_timer.className = 'songPlayTimer';

@@ -180,14 +178,14 @@ meta_timer.innerHTML = '0:00';

// Progress Indicator
var meta_progress_wrapper = document.createElement('div');
let meta_progress_wrapper = document.createElement('div');
meta_progress_wrapper.className = 'songProgressSliderWrapper';
var meta_pseudo_progress_background = document.createElement('div');
let meta_pseudo_progress_background = document.createElement('div');
meta_pseudo_progress_background.className = 'pseudoProgressBackground';
meta_progress_wrapper.appendChild(meta_pseudo_progress_background);
var meta_pseudo_progress_indicator = document.createElement('div');
let meta_pseudo_progress_indicator = document.createElement('div');
meta_pseudo_progress_indicator.className = 'pseudoProgressIndicator';
meta_progress_wrapper.appendChild(meta_pseudo_progress_indicator);
var meta_pseudo_progress_playhead = document.createElement('div');
let meta_pseudo_progress_playhead = document.createElement('div');
meta_pseudo_progress_playhead.className = 'pseudoProgressPlayhead';
meta_progress_wrapper.appendChild(meta_pseudo_progress_playhead);
var meta_progress = document.createElement('input');
let meta_progress = document.createElement('input');
meta_progress.type = 'range';

@@ -202,3 +200,3 @@ meta_progress.min = 0;

var meta_duration = document.createElement('span');
let meta_duration = document.createElement('span');
meta_duration.className = 'songDuration';

@@ -209,15 +207,15 @@ meta_duration.innerHTML = '-:--';

// Volume Indicator
var meta_volume = document.createElement('div');
let meta_volume = document.createElement('div');
meta_volume.className = 'songVolume';
var meta_mute = document.createElement('button');
let meta_mute = document.createElement('button');
meta_mute.className = 'songMuteButton';
meta_mute.innerHTML = 'Mute';
meta_volume.appendChild(meta_mute);
var meta_volume_label_wrapper = document.createElement('div');
let meta_volume_label_wrapper = document.createElement('div');
meta_volume_label_wrapper.className = 'songVolumeLabelWrapper';
var meta_volume_label = document.createElement('span');
let meta_volume_label = document.createElement('span');
meta_volume_label.className = 'songVolumeLabel';
meta_volume_label.innerHTML = 'Volume';
meta_volume_label_wrapper.appendChild(meta_volume_label);
var meta_volume_value = document.createElement('span');
let meta_volume_value = document.createElement('span');
meta_volume_value.className = 'songVolumeValue';

@@ -227,14 +225,14 @@ meta_volume_value.innerHTML = '10';

meta_volume.appendChild(meta_volume_label_wrapper);
var meta_volume_wrapper = document.createElement('div');
let meta_volume_wrapper = document.createElement('div');
meta_volume_wrapper.className = 'songVolumeSliderWrapper';
var meta_pseudo_volume_background = document.createElement('div');
let meta_pseudo_volume_background = document.createElement('div');
meta_pseudo_volume_background.className = 'pseudoVolumeBackground';
meta_volume_wrapper.appendChild(meta_pseudo_volume_background);
var meta_pseudo_volume_indicator = document.createElement('div');
let meta_pseudo_volume_indicator = document.createElement('div');
meta_pseudo_volume_indicator.className = 'pseudoVolumeIndicator';
meta_volume_wrapper.appendChild(meta_pseudo_volume_indicator);
var meta_pseudo_volume_playhead = document.createElement('div');
let meta_pseudo_volume_playhead = document.createElement('div');
meta_pseudo_volume_playhead.className = 'pseudoVolumePlayhead';
meta_volume_wrapper.appendChild(meta_pseudo_volume_playhead);
var meta_volume_control = document.createElement('input');
let meta_volume_control = document.createElement('input');
meta_volume_control.type = 'range';

@@ -262,3 +260,3 @@ meta_volume_control.min = 0;

// Replace the original audio element with our new creation.
data[i].parentNode.replaceChild(newPlayer, data[i]);
_data[i].parentNode.replaceChild(newPlayer, _data[i]);
}

@@ -268,44 +266,42 @@ }

// Initialize the audio for each file, and setup the event listeners.
function initAudio(data) {
var myAudio = [];
function initAudio(_data) {
let _myAudio = _data.map((item, key) => {
let node = new Audio();
for (var i = 0; i < data.length; i++) {
// Init. the audio
myAudio[i] = new Audio();
// Apply the preload attr. if needed
if (data[i].preload) {
myAudio[i].preload = data[i].preload;
if (item.preload) {
node.preload = item.preload;
}
// Add the audio source (by URL) to the audio node
myAudio[i].src = data[i].url;
node.src = item.url;
// Check if file exists before setting time, to prevent IE11 error
if (!isNaN(myAudio[i].duration)) {
myAudio[i].currentTime = 0;
if (!isNaN(node.duration)) {
node.currentTime = 0;
}
// Assign an index to each audio node:
// this links the audio elements to the
// relevant markup
node.setAttribute('data-song-index', key);
// Setup event listeners
playPauseButtons[i].addEventListener('click', _playPauseAudio, false);
progressBar[i].addEventListener('input', sliderScrub, false);
volumeControl[i].addEventListener('input', volume, false);
myAudio[i].addEventListener('timeupdate', _triggerUpdateProgress, false);
myAudio[i].addEventListener('loadstart', _loadStart, false);
myAudio[i].addEventListener('canplaythrough', _canplaythrough, false);
muteButtons[i].addEventListener('click', _muteUnmuteAudio, false);
node.addEventListener('timeupdate', _triggerUpdateProgress, false);
node.addEventListener('loadstart', _loadStart, false);
node.addEventListener('canplaythrough', _canplaythrough, false);
node.addEventListener('error', _errors, false);
node.addEventListener('stalled', _stalled, false);
node.addEventListener('waiting', _errors, false);
node.addEventListener('progress', _progress, false);
myAudio[i].addEventListener('error', _errors, false);
myAudio[i].addEventListener('stalled', _stalled, false);
myAudio[i].addEventListener('waiting', _errors, false);
playPauseButtons[key].addEventListener('click', _playPauseAudio, false);
progressBar[key].addEventListener('input', sliderScrub, false);
volumeControl[key].addEventListener('input', volume, false);
muteButtons[key].addEventListener('click', _muteUnmuteAudio, false);
myAudio[i].addEventListener('progress', _progress, false);
return node;
});
// Assign an index to each audio node:
// this links the audio elements to the
// relevant markup
myAudio[i].setAttribute('data-song-index', i);
}
return myAudio;
return _myAudio;
}

@@ -324,5 +320,4 @@

// Fire this event when loading starts [TEST]
function _loadStart() {
// console.log( 'Load start' );
}
function _loadStart() {}
// console.log( 'Load start' );

@@ -332,3 +327,3 @@ // Fire this event when we can play the audio

function _canplaythrough() {
var index = this.getAttribute('data-song-index');
let index = this.getAttribute('data-song-index');
_setLengthDisplay(index);

@@ -343,8 +338,8 @@ _removeClass(wrappers[index], 'loading');

// Get the filename and type
var url = myAudio[i].src;
var fileType = _getFileType(url);
var fileName = _getFileName(url);
let url = myAudio[i].src;
let fileType = _getFileType(url);
let fileName = _getFileName(url);
// If there is a valid title, display that title...
var title = audioElements[i].title;
let title = audioElements[i].title;
if (title !== '') {

@@ -358,3 +353,3 @@ titleDisplay[i].innerHTML = title;

// If there is a valid 'artist', display the artist name.
var artist = audioElements[i].getAttribute('data-artist');
let artist = audioElements[i].getAttribute('data-artist');
if (artist !== '') {

@@ -383,3 +378,3 @@ artistDisplay[i].innerHTML = artist;

function pauseAll() {
for (var i = 0; i < data.length; i++) {
for (let i = 0; i < data.length; i++) {
myAudio[i].pause();

@@ -392,3 +387,3 @@ }

currentSongIndex = index;
for (var i = 0; i < data.length; i++) {
for (let i = 0; i < data.length; i++) {
if (i != index) {

@@ -403,6 +398,6 @@ myAudio[i].pause();

function sliderScrub() {
var value = this.value;
var index = this.parentNode.parentNode.parentNode.getAttribute('data-song-index');
var duration = myAudio[index].duration;
var targetTime = duration * (value / 100);
let value = this.value;
let index = this.parentNode.parentNode.parentNode.getAttribute('data-song-index');
let duration = myAudio[index].duration;
let targetTime = duration * (value / 100);
targetTime = targetTime.toFixed(2);

@@ -415,4 +410,4 @@ myAudio[index].currentTime = targetTime;

function volume() {
var value = this.value;
var index = this.parentNode.parentNode.parentNode.getAttribute('data-song-index');
let value = this.value;
let index = this.parentNode.parentNode.parentNode.getAttribute('data-song-index');
mute(index, false);

@@ -423,4 +418,4 @@ setVolume(index, value);

function setVolume(index, value) {
var valueMapped = value * 10;
var volumePercent = value * 100;
let valueMapped = value * 10;
let volumePercent = value * 100;
myAudio[index].volume = value;

@@ -435,3 +430,3 @@ volumeDisplay[index].innerHTML = valueMapped;

function mute(index, state) {
var oldVolume;
let oldVolume;
if (state) {

@@ -460,6 +455,6 @@ oldVolume = myAudio[index].volume;

function playPause(index, state) {
var buttonText = playPauseButtonsText[index];
var target = playPauseButtons[index];
let buttonText = playPauseButtonsText[index];
let target = playPauseButtons[index];
if (state) {
for (var i = 0; i < playPauseButtons.length; i++) {
for (let i = 0; i < playPauseButtons.length; i++) {
_removeClass(playPauseButtons[i], 'songPlaying');

@@ -483,5 +478,5 @@ _addClass(playPauseButtons[i], 'songPaused');

function _playPauseAudio() {
var targetSong = this.parentNode.getAttribute('data-song-index');
let targetSong = this.parentNode.getAttribute('data-song-index');
if (typeof targetSong != 'undefined') {
var playSong = _hasClass(this, 'songPlaying') ? false : true;
let playSong = _hasClass(this, 'songPlaying') ? false : true;
playPause(targetSong, playSong);

@@ -495,4 +490,4 @@ } else {

function _muteUnmuteAudio() {
var targetSong = this.parentNode.parentNode.getAttribute('data-song-index');
var buttonText = playPauseButtonsText[targetSong];
let targetSong = this.parentNode.parentNode.getAttribute('data-song-index');
let buttonText = playPauseButtonsText[targetSong];
if (_hasClass(this, 'songMuted')) {

@@ -513,3 +508,3 @@ mute(targetSong, false);

function _triggerUpdateProgress() {
var index = this.getAttribute('data-song-index');
let index = this.getAttribute('data-song-index');
_updateProgress(index);

@@ -520,5 +515,5 @@ }

function _updateProgress(index) {
var progress = myAudio[index].currentTime;
var duration = myAudio[index].duration;
var progressParsed = _secondsToMMSS(progress);
let progress = myAudio[index].currentTime;
let duration = myAudio[index].duration;
let progressParsed = _parseTime(progress);
playTimer[index].innerHTML = progressParsed;

@@ -528,3 +523,3 @@ if (progress >= duration) {

}
var progressPercent = (progress / duration * 100).toFixed(2);
let progressPercent = (progress / duration * 100).toFixed(2);
progressBar[index].value = progressPercent;

@@ -537,5 +532,5 @@ indicator[index].style.width = progressPercent + '%';

function _setLengthDisplay(index) {
var songLength = myAudio[index].duration;
var duration = _secondsToMMSS(songLength);
var songClass = '.song' + index;
let songLength = myAudio[index].duration;
let duration = _parseTime(songLength);
let songClass = '.song' + index;
songLengthBox[index].innerHTML = duration;

@@ -559,3 +554,3 @@ }

// console.log( e.type );
var index = this.getAttribute('data-song-index');
let index = this.getAttribute('data-song-index');
// console.log( myAudio[index].error );

@@ -566,4 +561,4 @@ // console.log(e);

function _error(e) {
var index = this.getAttribute('data-song-index');
var error = myAudio[index].error;
let index = this.getAttribute('data-song-index');
let error = myAudio[index].error;
// console.log( 'error: ' );

@@ -575,3 +570,3 @@ // console.log(e);

// console.log( 'stalled!' );
var index = this.getAttribute('data-song-index');
let index = this.getAttribute('data-song-index');
// console.log( 'Target: ' + index );

@@ -586,4 +581,4 @@ // console.log( 'Play?: ' + false );

function _progress(e) {
var index = this.getAttribute('data-song-index');
var readyState = myAudio[index].readyState;
let index = this.getAttribute('data-song-index');
let readyState = myAudio[index].readyState;
}

@@ -602,14 +597,25 @@

// Convert seconds into minutes-and-seconds (MMSS) format
function _secondsToMMSS(seconds) {
var mins = Math.floor((seconds % 3600) / 60);
mins = mins.toFixed(0);
mins = mins.toString();
var secs = Math.floor((seconds % 3600) % 60);
secs = secs.toFixed(0);
secs = secs.toString();
if (secs < 10) {
secs = '0' + secs;
function _parseTime(seconds) {
let hours = Math.floor(seconds / 3600);
let mins = Math.floor((seconds % 3600) / 60)
.toFixed(0)
.toString();
let secs = Math.floor((seconds % 3600) % 60)
.toFixed(0)
.toString();
// Left-pad seconds string if needed
secs = secs > 10 ? secs : `0${secs}`;
let parsedTime = `${mins}:${secs}`;
if (hours > 0) {
// Left-pad minutes string if needed
mins = mins > 10 ? mins : `0${mins}`;
parsedTime = `${hours}:${mins}:${secs}`;
}
var mmss = mins + ':' + secs;
return mmss;
return parsedTime;
}

@@ -619,3 +625,3 @@

function _hasClass(el, className) {
var result;
let result;
if (el.classList) {

@@ -657,4 +663,4 @@ result = el.classList.contains(className);

function _getFileName(string) {
var fullFileName = string.replace(/^.*[\\\/]/, '');
var withNoExtension = fullFileName.split('.')[0];
let fullFileName = string.replace(/^.*[\\\/]/, '');
let withNoExtension = fullFileName.split('.')[0];
return withNoExtension;

@@ -661,0 +667,0 @@ }

13

package.json
{
"name": "picobel",
"version": "1.0.10",
"version": "1.0.11",
"description": "Convert html audio tags into styleable markup.",

@@ -12,3 +12,4 @@ "main": "./cjs/picobel.js",

"sass": "node-sass --output-style expanded -o css scss",
"autoprefix": "postcss css/*.css --use autoprefixer -d css"
"autoprefix": "postcss css/*.css --use autoprefixer -d css",
"legacy": "uglifyjs picobel.legacy.js -o picobel.legacy.min.js"
},

@@ -30,3 +31,4 @@ "repository": {

"node-sass": "^4.9.0",
"postcss-cli": "^5.0.0"
"postcss-cli": "^5.0.0",
"uglify-js": "^3.3.28"
},

@@ -39,3 +41,6 @@ "babel": {

"targets": {
"node": "current"
"browsers": [
"last 2 versions",
"safari >= 7"
]
}

@@ -42,0 +47,0 @@ }

136

picobel.legacy.js

@@ -32,4 +32,5 @@ /**

options = typeof options !== 'undefined' ? options : {};
// options.prefix = options.prefix || '';
options.theme = options.theme || 'defaultPlayerTheme';
// Setting a value for `preload` here will override the audio element's value.
options.preload = options.preload || false;

@@ -77,2 +78,4 @@ /**

console.log('myAudio', myAudio);
// Create a var to store the index of the file currently

@@ -106,12 +109,9 @@ // being played (defaulting to the first track in the DOM)

// found by findAudio()]
function getRawData(data) {
output = [];
for (var i = 0; i < data.length; i++) {
item = {};
// Get the file's URL
item.url = data[i].src;
// Check for a audio tag's `preload` attribute
item.preload = options.preload ? options.preload : data[i].preload;
output.push(item);
}
function getRawData(_data) {
var output = _data.map(function(item) {
return {
preload: options.preload ? options.preload : item.preload,
url: item.src
};
});
return output;

@@ -121,4 +121,4 @@ }

// Create our own markup in place of the native <audio> elements.
function buildMarkup(data) {
for (var i = 0; i < data.length; i++) {
function buildMarkup(_data) {
for (var i = 0; i < _data.length; i++) {
// Create a container for our new player

@@ -252,3 +252,3 @@ var newPlayer = document.createElement('div');

// Replace the original audio element with our new creation.
data[i].parentNode.replaceChild(newPlayer, data[i]);
_data[i].parentNode.replaceChild(newPlayer, _data[i]);
}

@@ -258,44 +258,42 @@ }

// Initialize the audio for each file, and setup the event listeners.
function initAudio(data) {
var myAudio = [];
function initAudio(_data) {
var _myAudio = _data.map(function(item, key) {
var node = new Audio();
for (var i = 0; i < data.length; i++) {
// Init. the audio
myAudio[i] = new Audio();
// Apply the preload attr. if needed
if (data[i].preload) {
myAudio[i].preload = data[i].preload;
if (item.preload) {
node.preload = item.preload;
}
// Add the audio source (by URL) to the audio node
myAudio[i].src = data[i].url;
node.src = item.url;
// Check if file exists before setting time, to prevent IE11 error
if (!isNaN(myAudio[i].duration)) {
myAudio[i].currentTime = 0;
if (!isNaN(node.duration)) {
node.currentTime = 0;
}
// Assign an index to each audio node:
// this links the audio elements to the
// relevant markup
node.setAttribute('data-song-index', key);
// Setup event listeners
playPauseButtons[i].addEventListener('click', _playPauseAudio, false);
progressBar[i].addEventListener('input', sliderScrub, false);
volumeControl[i].addEventListener('input', volume, false);
myAudio[i].addEventListener('timeupdate', _triggerUpdateProgress, false);
myAudio[i].addEventListener('loadstart', _loadStart, false);
myAudio[i].addEventListener('canplaythrough', _canplaythrough, false);
muteButtons[i].addEventListener('click', _muteUnmuteAudio, false);
node.addEventListener('timeupdate', _triggerUpdateProgress, false);
node.addEventListener('loadstart', _loadStart, false);
node.addEventListener('canplaythrough', _canplaythrough, false);
node.addEventListener('error', _errors, false);
node.addEventListener('stalled', _stalled, false);
node.addEventListener('waiting', _errors, false);
node.addEventListener('progress', _progress, false);
myAudio[i].addEventListener('error', _errors, false);
myAudio[i].addEventListener('stalled', _stalled, false);
myAudio[i].addEventListener('waiting', _errors, false);
playPauseButtons[key].addEventListener('click', _playPauseAudio, false);
progressBar[key].addEventListener('input', sliderScrub, false);
volumeControl[key].addEventListener('input', volume, false);
muteButtons[key].addEventListener('click', _muteUnmuteAudio, false);
myAudio[i].addEventListener('progress', _progress, false);
return node;
});
// Assign an index to each audio node:
// this links the audio elements to the
// relevant markup
myAudio[i].setAttribute('data-song-index', i);
}
return myAudio;
return _myAudio;
}

@@ -314,5 +312,4 @@

// Fire this event when loading starts [TEST]
function _loadStart() {
// console.log( 'Load start' );
}
function _loadStart() {}
// console.log( 'Load start' );

@@ -417,3 +414,3 @@ // Fire this event when we can play the audio

function mute(index, state) {
var oldVolume;
var oldVolume = void 0;
if (state) {

@@ -445,3 +442,3 @@ oldVolume = myAudio[index].volume;

if (state) {
for (i = 0; i < playPauseButtons.length; i++) {
for (var i = 0; i < playPauseButtons.length; i++) {
_removeClass(playPauseButtons[i], 'songPlaying');

@@ -467,4 +464,4 @@ _addClass(playPauseButtons[i], 'songPaused');

if (typeof targetSong != 'undefined') {
var playSong = _hasClass(this, 'songPlaying') ? false : true;
playPause(targetSong, playSong);
var _playSong = _hasClass(this, 'songPlaying') ? false : true;
playPause(targetSong, _playSong);
} else {

@@ -502,3 +499,3 @@ console.log('too soon to play!');

var duration = myAudio[index].duration;
progressParsed = _secondsToMMSS(progress);
var progressParsed = _parseTime(progress);
playTimer[index].innerHTML = progressParsed;

@@ -517,3 +514,3 @@ if (progress >= duration) {

var songLength = myAudio[index].duration;
var duration = _secondsToMMSS(songLength);
var duration = _parseTime(songLength);
var songClass = '.song' + index;

@@ -577,14 +574,25 @@ songLengthBox[index].innerHTML = duration;

// Convert seconds into minutes-and-seconds (MMSS) format
function _secondsToMMSS(seconds) {
var mins = Math.floor((seconds % 3600) / 60);
mins = mins.toFixed(0);
mins = mins.toString();
var secs = Math.floor((seconds % 3600) % 60);
secs = secs.toFixed(0);
secs = secs.toString();
if (secs < 10) {
secs = '0' + secs;
function _parseTime(seconds) {
var hours = Math.floor(seconds / 3600);
var mins = Math.floor((seconds % 3600) / 60)
.toFixed(0)
.toString();
var secs = Math.floor((seconds % 3600) % 60)
.toFixed(0)
.toString();
// Left-pad seconds string if needed
secs = secs > 10 ? secs : '0' + secs;
var parsedTime = mins + ':' + secs;
if (hours > 0) {
// Left-pad minutes string if needed
mins = mins > 10 ? mins : '0' + mins;
parsedTime = hours + ':' + mins + ':' + secs;
}
var mmss = mins + ':' + secs;
return mmss;
return parsedTime;
}

@@ -594,3 +602,3 @@

function _hasClass(el, className) {
var result;
var result = void 0;
if (el.classList) {

@@ -597,0 +605,0 @@ result = el.classList.contains(className);

252

picobel.legacy.min.js

@@ -1,251 +0,1 @@

function Picobel(e) {
(e = void 0 !== e ? e : {}).theme = e.theme || 'defaultPlayerTheme';
var t,
a = ((t = document.getElementsByTagName('audio')), [].slice.call(t)),
n = (function(t) {
output = [];
for (var a = 0; a < t.length; a++)
(item = {}),
(item.url = t[a].src),
(item.preload = e.preload ? e.preload : t[a].preload),
output.push(item);
return output;
})(a);
!(function(t) {
for (var n = 0; n < t.length; n++) {
var s = document.createElement('div');
s.className = 'customAudioPlayer loading player_' + n;
var r = a[n].className;
'' !== r && R(s, r), R(s, e.theme), s.setAttribute('data-song-index', n);
var d = document.createElement('div');
(d.className = 'loader'), s.appendChild(d);
var l = document.createElement('button');
l.className = 'playerTrigger';
var o = document.createElement('span');
(o.className = 'buttonText'), (o.innerHTML = 'play'), l.appendChild(o);
var i = document.createElement('div');
i.className = 'metaWrapper';
var u = document.createElement('span');
(u.className = 'titleDisplay'), (u.innerHTML = 'File ' + (n + 1)), i.appendChild(u);
var m = document.createElement('span');
(m.className = 'artistDisplay'), i.appendChild(m);
var c = document.createElement('div');
c.className = 'timingsWrapper';
var p = document.createElement('span');
(p.className = 'songPlayTimer'), (p.innerHTML = '0:00'), c.appendChild(p);
var g = document.createElement('div');
g.className = 'songProgressSliderWrapper';
var v = document.createElement('div');
(v.className = 'pseudoProgressBackground'), g.appendChild(v);
var h = document.createElement('div');
(h.className = 'pseudoProgressIndicator'), g.appendChild(h);
var N = document.createElement('div');
(N.className = 'pseudoProgressPlayhead'), g.appendChild(N);
var E = document.createElement('input');
(E.type = 'range'),
(E.min = 0),
(E.max = 100),
(E.value = 0),
(E.className = 'songProgressSlider'),
g.appendChild(E),
c.appendChild(g);
var y = document.createElement('span');
(y.className = 'songDuration'), (y.innerHTML = '-:--'), c.appendChild(y);
var C = document.createElement('div');
C.className = 'songVolume';
var f = document.createElement('button');
(f.className = 'songMuteButton'), (f.innerHTML = 'Mute'), C.appendChild(f);
var L = document.createElement('div');
L.className = 'songVolumeLabelWrapper';
var P = document.createElement('span');
(P.className = 'songVolumeLabel'), (P.innerHTML = 'Volume'), L.appendChild(P);
var T = document.createElement('span');
(T.className = 'songVolumeValue'),
(T.innerHTML = '10'),
L.appendChild(T),
C.appendChild(L);
var b = document.createElement('div');
b.className = 'songVolumeSliderWrapper';
var M = document.createElement('div');
(M.className = 'pseudoVolumeBackground'), b.appendChild(M);
var x = document.createElement('div');
(x.className = 'pseudoVolumeIndicator'), b.appendChild(x);
var B = document.createElement('div');
(B.className = 'pseudoVolumePlayhead'), b.appendChild(B);
var A = document.createElement('input');
(A.type = 'range'),
(A.min = 0),
(A.max = 1),
(A.value = 1),
(A.step = 0.1),
(A.className = 'songVolumeSlider'),
b.appendChild(A),
C.appendChild(b),
s.appendChild(l),
s.appendChild(i),
s.appendChild(c),
s.appendChild(C),
t[n].parentNode.replaceChild(s, t[n]);
}
})(a);
var s = document.getElementsByClassName('customAudioPlayer'),
r = document.getElementsByClassName('playerTrigger'),
d = document.getElementsByClassName('songMuteButton'),
l = document.getElementsByClassName('buttonText'),
o = document.getElementsByClassName('songPlayTimer'),
u = document.getElementsByClassName('songDuration'),
m = document.getElementsByClassName('titleDisplay'),
c = document.getElementsByClassName('artistDisplay'),
p = document.getElementsByClassName('songProgressSlider'),
g = document.getElementsByClassName('pseudoProgressPlayhead'),
v = document.getElementsByClassName('pseudoProgressIndicator'),
h = document.getElementsByClassName('songVolumeSlider'),
N = document.getElementsByClassName('songVolumeValue'),
E = document.getElementsByClassName('pseudoVolumeIndicator'),
y = document.getElementsByClassName('pseudoVolumePlayhead'),
C = (function(e) {
for (var t = [], a = 0; a < e.length; a++)
(t[a] = new Audio()),
e[a].preload && (t[a].preload = e[a].preload),
(t[a].src = e[a].url),
isNaN(t[a].duration) || (t[a].currentTime = 0),
r[a].addEventListener('click', H, !1),
p[a].addEventListener('input', b, !1),
h[a].addEventListener('input', M, !1),
t[a].addEventListener('timeupdate', S, !1),
t[a].addEventListener('loadstart', f, !1),
t[a].addEventListener('canplaythrough', L, !1),
d[a].addEventListener('click', V, !1),
t[a].addEventListener('error', D, !1),
t[a].addEventListener('stalled', F, !1),
t[a].addEventListener('waiting', D, !1),
t[a].addEventListener('progress', I, !1),
t[a].setAttribute('data-song-index', a);
return t;
})(n);
function f() {}
function L() {
var e,
t,
n = this.getAttribute('data-song-index');
(t = W(C[(e = n)].duration)),
(u[e].innerHTML = t),
U(s[n], 'loading'),
(function(e) {
var t = C[e].src,
n = ((l = t), l.substr(2 + (~-l.lastIndexOf('.') >>> 0))),
s = ((d = t), d.replace(/^.*[\\\/]/, '').split('.')[0]),
r = a[e].title;
var d;
var l;
m[e].innerHTML = '' !== r ? r : s + '.' + n;
var o = a[e].getAttribute('data-artist');
'' !== o && (c[e].innerHTML = o);
})(n);
}
function P() {
for (var e = 0; e < n.length; e++) C[e].pause();
}
function T(e) {
e;
for (var t = 0; t < n.length; t++) t != e && C[t].pause();
C[e].play();
}
function b() {
var e = this.value,
t = this.parentNode.parentNode.parentNode.getAttribute('data-song-index'),
a = C[t].duration * (e / 100);
(a = a.toFixed(2)), (C[t].currentTime = a), w(t);
}
function M() {
var e = this.value,
t = this.parentNode.parentNode.parentNode.getAttribute('data-song-index');
B(t, !1), x(t, e);
}
function x(e, t) {
var a = 10 * t,
n = 100 * t;
(C[e].volume = t),
(N[e].innerHTML = a),
(h[e].value = t),
(E[e].style.width = n + '%'),
(y[e].style.left = n + '%');
}
function B(e, t) {
var a;
t
? ((a = C[e].volume),
d[e].setAttribute('data-saved-volume', a),
x(e, 0),
R(d[e], 'songMuted'),
U(d[e], 'songUnmuted'),
(d[e].innerHTML = 'unmute'))
: (x(e, void 0 !== (a = d[e].getAttribute('data-saved-volume')) && a > 0 ? a : 1),
U(d[e], 'songMuted'),
R(d[e], 'songUnmuted'),
(d[e].innerHTML = 'mute'));
}
function A(e, t) {
var a = l[e],
n = r[e];
if (t) {
for (i = 0; i < r.length; i++)
U(r[i], 'songPlaying'), R(r[i], 'songPaused'), (l[i].innerHTML = 'play');
T(e), R(n, 'songPlaying'), U(n, 'songPaused'), (a.innerHTML = 'pause');
} else P(), U(n, 'songPlaying'), R(n, 'songPaused'), (a.innerHTML = 'play');
}
function H() {
var e = this.parentNode.getAttribute('data-song-index');
void 0 !== e ? A(e, !k(this, 'songPlaying')) : console.log('too soon to play!');
}
function V() {
var e = this.parentNode.parentNode.getAttribute('data-song-index');
l[e];
k(this, 'songMuted') ? B(e, !1) : B(e, !0);
}
function S() {
w(this.getAttribute('data-song-index'));
}
function w(e) {
var t = C[e].currentTime,
a = C[e].duration;
(progressParsed = W(t)),
(o[e].innerHTML = progressParsed),
t >= a && U(r[e], 'songPlaying');
var n = (t / a * 100).toFixed(2);
(p[e].value = n), (v[e].style.width = n + '%'), (g[e].style.left = n + '%');
}
function D(e) {
this.getAttribute('data-song-index');
}
function F(e) {
A(this.getAttribute('data-song-index'), !1);
}
function I(e) {
var t = this.getAttribute('data-song-index');
C[t].readyState;
}
function W(e) {
var t = Math.floor((e % 3600) / 60);
t = (t = t.toFixed(0)).toString();
var a = Math.floor((e % 3600) % 60);
return (a = (a = a.toFixed(0)).toString()) < 10 && (a = '0' + a), t + ':' + a;
}
function k(e, t) {
return e.classList
? e.classList.contains(t)
: new RegExp('(^| )' + t + '( |$)', 'gi').test(e.className);
}
function R(e, t) {
e.classList ? e.classList.add(t) : (e.className += ' ' + t);
}
function U(e, t) {
e.classList
? e.classList.remove(t)
: (e.className = e.className.replace(
new RegExp('(^|\\b)' + t.split(' ').join('|') + '(\\b|$)', 'gi'),
' '
));
}
return { sliderScrub: b, playSong: T, pauseAll: P };
}
function Picobel(options){options=typeof options!=="undefined"?options:{};options.theme=options.theme||"defaultPlayerTheme";options.preload=options.preload||false;var audioElements=findAudio();var data=getRawData(audioElements);buildMarkup(audioElements);var wrappers=document.getElementsByClassName("customAudioPlayer");var playPauseButtons=document.getElementsByClassName("playerTrigger");var muteButtons=document.getElementsByClassName("songMuteButton");var playPauseButtonsText=document.getElementsByClassName("buttonText");var playTimer=document.getElementsByClassName("songPlayTimer");var songLengthBox=document.getElementsByClassName("songDuration");var titleDisplay=document.getElementsByClassName("titleDisplay");var artistDisplay=document.getElementsByClassName("artistDisplay");var progressBar=document.getElementsByClassName("songProgressSlider");var playhead=document.getElementsByClassName("pseudoProgressPlayhead");var indicator=document.getElementsByClassName("pseudoProgressIndicator");var volumeControl=document.getElementsByClassName("songVolumeSlider");var volumeDisplay=document.getElementsByClassName("songVolumeValue");var volumeIndicator=document.getElementsByClassName("pseudoVolumeIndicator");var volumePlayhead=document.getElementsByClassName("pseudoVolumePlayhead");var myAudio=initAudio(data);console.log("myAudio",myAudio);var currentSongIndex=0;function findAudio(){var audioElements=document.getElementsByTagName("audio");var items=[].slice.call(audioElements);return items}function getRawData(_data){var output=_data.map(function(item){return{preload:options.preload?options.preload:item.preload,url:item.src}});return output}function buildMarkup(_data){for(var i=0;i<_data.length;i++){var newPlayer=document.createElement("div");newPlayer.className="customAudioPlayer loading player_"+i;var className=audioElements[i].className;if(className!==""){_addClass(newPlayer,className)}_addClass(newPlayer,options.theme);newPlayer.setAttribute("data-song-index",i);var loading=document.createElement("div");loading.className="loader";newPlayer.appendChild(loading);var button=document.createElement("button");button.className="playerTrigger";var buttonText=document.createElement("span");buttonText.className="buttonText";buttonText.innerHTML="play";button.appendChild(buttonText);var meta=document.createElement("div");meta.className="metaWrapper";var meta_title=document.createElement("span");meta_title.className="titleDisplay";meta_title.innerHTML="File "+(i+1);meta.appendChild(meta_title);var meta_artist=document.createElement("span");meta_artist.className="artistDisplay";meta.appendChild(meta_artist);var timings=document.createElement("div");timings.className="timingsWrapper";var meta_timer=document.createElement("span");meta_timer.className="songPlayTimer";meta_timer.innerHTML="0:00";timings.appendChild(meta_timer);var meta_progress_wrapper=document.createElement("div");meta_progress_wrapper.className="songProgressSliderWrapper";var meta_pseudo_progress_background=document.createElement("div");meta_pseudo_progress_background.className="pseudoProgressBackground";meta_progress_wrapper.appendChild(meta_pseudo_progress_background);var meta_pseudo_progress_indicator=document.createElement("div");meta_pseudo_progress_indicator.className="pseudoProgressIndicator";meta_progress_wrapper.appendChild(meta_pseudo_progress_indicator);var meta_pseudo_progress_playhead=document.createElement("div");meta_pseudo_progress_playhead.className="pseudoProgressPlayhead";meta_progress_wrapper.appendChild(meta_pseudo_progress_playhead);var meta_progress=document.createElement("input");meta_progress.type="range";meta_progress.min=0;meta_progress.max=100;meta_progress.value=0;meta_progress.className="songProgressSlider";meta_progress_wrapper.appendChild(meta_progress);timings.appendChild(meta_progress_wrapper);var meta_duration=document.createElement("span");meta_duration.className="songDuration";meta_duration.innerHTML="-:--";timings.appendChild(meta_duration);var meta_volume=document.createElement("div");meta_volume.className="songVolume";var meta_mute=document.createElement("button");meta_mute.className="songMuteButton";meta_mute.innerHTML="Mute";meta_volume.appendChild(meta_mute);var meta_volume_label_wrapper=document.createElement("div");meta_volume_label_wrapper.className="songVolumeLabelWrapper";var meta_volume_label=document.createElement("span");meta_volume_label.className="songVolumeLabel";meta_volume_label.innerHTML="Volume";meta_volume_label_wrapper.appendChild(meta_volume_label);var meta_volume_value=document.createElement("span");meta_volume_value.className="songVolumeValue";meta_volume_value.innerHTML="10";meta_volume_label_wrapper.appendChild(meta_volume_value);meta_volume.appendChild(meta_volume_label_wrapper);var meta_volume_wrapper=document.createElement("div");meta_volume_wrapper.className="songVolumeSliderWrapper";var meta_pseudo_volume_background=document.createElement("div");meta_pseudo_volume_background.className="pseudoVolumeBackground";meta_volume_wrapper.appendChild(meta_pseudo_volume_background);var meta_pseudo_volume_indicator=document.createElement("div");meta_pseudo_volume_indicator.className="pseudoVolumeIndicator";meta_volume_wrapper.appendChild(meta_pseudo_volume_indicator);var meta_pseudo_volume_playhead=document.createElement("div");meta_pseudo_volume_playhead.className="pseudoVolumePlayhead";meta_volume_wrapper.appendChild(meta_pseudo_volume_playhead);var meta_volume_control=document.createElement("input");meta_volume_control.type="range";meta_volume_control.min=0;meta_volume_control.max=1;meta_volume_control.value=1;meta_volume_control.step=.1;meta_volume_control.className="songVolumeSlider";meta_volume_wrapper.appendChild(meta_volume_control);meta_volume.appendChild(meta_volume_wrapper);newPlayer.appendChild(button);newPlayer.appendChild(meta);newPlayer.appendChild(timings);newPlayer.appendChild(meta_volume);_data[i].parentNode.replaceChild(newPlayer,_data[i])}}function initAudio(_data){var _myAudio=_data.map(function(item,key){var node=new Audio;if(item.preload){node.preload=item.preload}node.src=item.url;if(!isNaN(node.duration)){node.currentTime=0}node.setAttribute("data-song-index",key);node.addEventListener("timeupdate",_triggerUpdateProgress,false);node.addEventListener("loadstart",_loadStart,false);node.addEventListener("canplaythrough",_canplaythrough,false);node.addEventListener("error",_errors,false);node.addEventListener("stalled",_stalled,false);node.addEventListener("waiting",_errors,false);node.addEventListener("progress",_progress,false);playPauseButtons[key].addEventListener("click",_playPauseAudio,false);progressBar[key].addEventListener("input",sliderScrub,false);volumeControl[key].addEventListener("input",volume,false);muteButtons[key].addEventListener("click",_muteUnmuteAudio,false);return node});return _myAudio}function _loadStart(){}function _canplaythrough(){var index=this.getAttribute("data-song-index");_setLengthDisplay(index);_removeClass(wrappers[index],"loading");_getMeta(index)}function _getMeta(i){var url=myAudio[i].src;var fileType=_getFileType(url);var fileName=_getFileName(url);var title=audioElements[i].title;if(title!==""){titleDisplay[i].innerHTML=title}else{titleDisplay[i].innerHTML=fileName+"."+fileType}var artist=audioElements[i].getAttribute("data-artist");if(artist!==""){artistDisplay[i].innerHTML=artist}}function pauseAll(){for(var i=0;i<data.length;i++){myAudio[i].pause()}}function playSong(index){currentSongIndex=index;for(var i=0;i<data.length;i++){if(i!=index){myAudio[i].pause()}}myAudio[index].play()}function sliderScrub(){var value=this.value;var index=this.parentNode.parentNode.parentNode.getAttribute("data-song-index");var duration=myAudio[index].duration;var targetTime=duration*(value/100);targetTime=targetTime.toFixed(2);myAudio[index].currentTime=targetTime;_updateProgress(index)}function volume(){var value=this.value;var index=this.parentNode.parentNode.parentNode.getAttribute("data-song-index");mute(index,false);setVolume(index,value)}function setVolume(index,value){var valueMapped=value*10;var volumePercent=value*100;myAudio[index].volume=value;volumeDisplay[index].innerHTML=valueMapped;volumeControl[index].value=value;volumeIndicator[index].style.width=volumePercent+"%";volumePlayhead[index].style.left=volumePercent+"%"}function mute(index,state){var oldVolume=void 0;if(state){oldVolume=myAudio[index].volume;muteButtons[index].setAttribute("data-saved-volume",oldVolume);setVolume(index,0);_addClass(muteButtons[index],"songMuted");_removeClass(muteButtons[index],"songUnmuted");muteButtons[index].innerHTML="unmute"}else{oldVolume=muteButtons[index].getAttribute("data-saved-volume");if(typeof oldVolume!="undefined"&&oldVolume>0){setVolume(index,oldVolume)}else{setVolume(index,1)}_removeClass(muteButtons[index],"songMuted");_addClass(muteButtons[index],"songUnmuted");muteButtons[index].innerHTML="mute"}}function playPause(index,state){var buttonText=playPauseButtonsText[index];var target=playPauseButtons[index];if(state){for(var i=0;i<playPauseButtons.length;i++){_removeClass(playPauseButtons[i],"songPlaying");_addClass(playPauseButtons[i],"songPaused");playPauseButtonsText[i].innerHTML="play"}playSong(index);_addClass(target,"songPlaying");_removeClass(target,"songPaused");buttonText.innerHTML="pause"}else{pauseAll();_removeClass(target,"songPlaying");_addClass(target,"songPaused");buttonText.innerHTML="play"}}function _playPauseAudio(){var targetSong=this.parentNode.getAttribute("data-song-index");if(typeof targetSong!="undefined"){var _playSong=_hasClass(this,"songPlaying")?false:true;playPause(targetSong,_playSong)}else{console.log("too soon to play!")}}function _muteUnmuteAudio(){var targetSong=this.parentNode.parentNode.getAttribute("data-song-index");var buttonText=playPauseButtonsText[targetSong];if(_hasClass(this,"songMuted")){mute(targetSong,false)}else{mute(targetSong,true)}}function _triggerUpdateProgress(){var index=this.getAttribute("data-song-index");_updateProgress(index)}function _updateProgress(index){var progress=myAudio[index].currentTime;var duration=myAudio[index].duration;var progressParsed=_parseTime(progress);playTimer[index].innerHTML=progressParsed;if(progress>=duration){_removeClass(playPauseButtons[index],"songPlaying")}var progressPercent=(progress/duration*100).toFixed(2);progressBar[index].value=progressPercent;indicator[index].style.width=progressPercent+"%";playhead[index].style.left=progressPercent+"%"}function _setLengthDisplay(index){var songLength=myAudio[index].duration;var duration=_parseTime(songLength);var songClass=".song"+index;songLengthBox[index].innerHTML=duration}function _errors(e){var index=this.getAttribute("data-song-index")}function _error(e){var index=this.getAttribute("data-song-index");var error=myAudio[index].error}function _stalled(e){var index=this.getAttribute("data-song-index");playPause(index,false)}function _waiting(){}function _progress(e){var index=this.getAttribute("data-song-index");var readyState=myAudio[index].readyState}function _parseTime(seconds){var hours=Math.floor(seconds/3600);var mins=Math.floor(seconds%3600/60).toFixed(0).toString();var secs=Math.floor(seconds%3600%60).toFixed(0).toString();secs=secs>10?secs:"0"+secs;var parsedTime=mins+":"+secs;if(hours>0){mins=mins>10?mins:"0"+mins;parsedTime=hours+":"+mins+":"+secs}return parsedTime}function _hasClass(el,className){var result=void 0;if(el.classList){result=el.classList.contains(className)}else{result=new RegExp("(^| )"+className+"( |$)","gi").test(el.className)}return result}function _addClass(el,className){if(el.classList){el.classList.add(className)}else{el.className+=" "+className}}function _removeClass(el,className){if(el.classList){el.classList.remove(className)}else{el.className=el.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function _getFileType(string){return string.substr((~-string.lastIndexOf(".")>>>0)+2)}function _getFileName(string){var fullFileName=string.replace(/^.*[\\\/]/,"");var withNoExtension=fullFileName.split(".")[0];return withNoExtension}return{sliderScrub:sliderScrub,playSong:playSong,pauseAll:pauseAll}}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc