New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
picobel - npm Package Compare versions
Comparing version 1.0.11 to 2.0.0
@@ -1,646 +0,193 @@ | ||
| 'use strict'; | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| /** | ||
| * ----------------------------------------- | ||
| * ____ _ _ _ _ | ||
| * | _ \(_) ___ ___ | |__ ___| | (_)___ | ||
| * | |_) | |/ __/ _ \| '_ \ / _ \ | | / __| | ||
| * | __/| | (_| (_) | |_) | __/ |_ | \__ \ | ||
| * |_| |_|\___\___/|_.__/ \___|_(_)| |___/ | ||
| * Picobel.js _/ | | ||
| * tomhazledine.com/audio |__/ | ||
| * | ||
| * ========================================= | ||
| * | ||
| * Replace any native <audio> instances with | ||
| * standard elements (spans, buttons & divs) | ||
| * that we can style however we like. | ||
| * | ||
| * Functionality powered by Web Audio API. | ||
| * ----------------------------------------- | ||
| */ | ||
| function Picobel(options) { | ||
| /** | ||
| * ----------------------- | ||
| * PARSE OPTIONS | ||
| * | ||
| * Make sure we have valid | ||
| * options. If we don't we | ||
| * should provide sensible | ||
| * fallbacks. | ||
| * ----------------------- | ||
| */ | ||
| options = typeof options !== 'undefined' ? options : {}; | ||
| options.theme = options.theme || 'defaultPlayerTheme'; | ||
| // Setting a value for `preload` here will override the audio element's value. | ||
| options.preload = options.preload || false; | ||
| var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
| /** | ||
| * --------------------------------------------- | ||
| * MAKE STUFF HAPPEN | ||
| * | ||
| * The following lines initialize functions we | ||
| * declare further down the file. We need to | ||
| * call them in a specific order (so things like | ||
| * element-selection work properly). | ||
| * --------------------------------------------- | ||
| */ | ||
| // Find all the elements and store them | ||
| // in an array (for easy access). | ||
| var audioElements = findAudio(); | ||
| // Get our data from those elements. | ||
| var data = getRawData(audioElements); | ||
| // Replace those elements with our own custom markup. | ||
| buildMarkup(audioElements); | ||
| // 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'); | ||
| // Initialize the audio. | ||
| var 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; | ||
| /** | ||
| * --------------------------------- | ||
| * SETUP | ||
| * | ||
| * These functions find our targets, | ||
| * generate our elements, and set up | ||
| * our environment. | ||
| * --------------------------------- | ||
| */ | ||
| // Return an array of all the <audio> elements found on the page. | ||
| function findAudio() { | ||
| // Get all the <audio> occurrences in the page. | ||
| var 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); | ||
| return items; | ||
| } | ||
| // Get the url for each audio file | ||
| // we want to load [using elements | ||
| // found by findAudio()] | ||
| function getRawData(_data) { | ||
| var output = _data.map(function (item) { | ||
| return { | ||
| preload: options.preload ? options.preload : item.preload, | ||
| url: item.src | ||
| }; | ||
| !function (e, t) { | ||
| "object" == (typeof exports === "undefined" ? "undefined" : _typeof(exports)) && "object" == (typeof module === "undefined" ? "undefined" : _typeof(module)) ? module.exports = t() : "function" == typeof define && define.amd ? define("picobel", [], t) : "object" == (typeof exports === "undefined" ? "undefined" : _typeof(exports)) ? exports.picobel = t() : e.picobel = t(); | ||
| }(window, function () { | ||
| return function (e) { | ||
| var t = {};function n(r) { | ||
| if (t[r]) return t[r].exports;var a = t[r] = { i: r, l: !1, exports: {} };return e[r].call(a.exports, a, a.exports, n), a.l = !0, a.exports; | ||
| }return n.m = e, n.c = t, n.d = function (e, t, r) { | ||
| n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }); | ||
| }, n.r = function (e) { | ||
| "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }); | ||
| }, n.t = function (e, t) { | ||
| if (1 & t && (e = n(e)), 8 & t) return e;if (4 & t && "object" == (typeof e === "undefined" ? "undefined" : _typeof(e)) && e && e.__esModule) return e;var r = Object.create(null);if (n.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e) for (var a in e) { | ||
| n.d(r, a, function (t) { | ||
| return e[t]; | ||
| }.bind(null, a)); | ||
| }return r; | ||
| }, n.n = function (e) { | ||
| var t = e && e.__esModule ? function () { | ||
| return e.default; | ||
| } : function () { | ||
| return e; | ||
| };return n.d(t, "a", t), t; | ||
| }, n.o = function (e, t) { | ||
| return Object.prototype.hasOwnProperty.call(e, t); | ||
| }, n.p = "", n(n.s = 4); | ||
| }([function (e, t, n) { | ||
| "use strict"; | ||
| Object.defineProperty(t, "__esModule", { value: !0 });var r = { parseTime: function parseTime(e) { | ||
| var t = Math.floor(e / 3600), | ||
| n = Math.floor(e % 3600 / 60).toFixed(0).toString(), | ||
| r = Math.floor(e % 3600 % 60).toFixed(0).toString(), | ||
| a = n + ":" + (r = r >= 10 ? r : "0" + r);return t > 0 && (a = t + ":" + (n = n >= 10 ? n : "0" + n) + ":" + r), a; | ||
| }, getFileType: function getFileType(e) { | ||
| return e.substr(2 + (~-e.lastIndexOf(".") >>> 0)); | ||
| }, getFileName: function getFileName(e) { | ||
| return e.replace(/^.*[\\\/]/, "").split(".")[0]; | ||
| }, findParentIndex: function findParentIndex(e) { | ||
| return void 0 !== e.dataset.songIndex ? e.dataset.songIndex : void 0 !== e.parentNode && void 0 !== e.parentNode.dataset && r.findParentIndex(e.parentNode); | ||
| } };t.default = r; | ||
| }, function (e, t, n) { | ||
| "use strict"; | ||
| Object.defineProperty(t, "__esModule", { value: !0 });var r, | ||
| a = n(0), | ||
| l = (r = a) && r.__esModule ? r : { default: r };var o = { findAudio: function findAudio() { | ||
| var e = document.getElementsByTagName("audio");return [].slice.call(e); | ||
| }, prepareClasses: function prepareClasses(e, t, n) { | ||
| var r = ("customAudioPlayer loading player_" + e + " " + t).trim().split(" ");return r.push(n), r; | ||
| }, getRawData: function getRawData(e) { | ||
| return e.map(function (e, t) { | ||
| return e.key = t, e.mute = !1, e.tmpVolume = 1, e; | ||
| }); | ||
| return output; | ||
| } | ||
| // Create our own markup in place of the native <audio> elements. | ||
| function buildMarkup(_data) { | ||
| for (var i = 0; i < _data.length; i++) { | ||
| // Create a container for our new player | ||
| 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 | ||
| var className = audioElements[i].className; | ||
| if (className !== '') { | ||
| _addClass(newPlayer, className); | ||
| } | ||
| // Add the class set in our options. | ||
| _addClass(newPlayer, options.theme); | ||
| newPlayer.setAttribute('data-song-index', i); | ||
| // Create a loading indicator | ||
| var loading = document.createElement('div'); | ||
| loading.className = 'loader'; | ||
| newPlayer.appendChild(loading); | ||
| // Add "waiting" indicator here. | ||
| // Create a play/pause button | ||
| var button = document.createElement('button'); | ||
| button.className = 'playerTrigger'; | ||
| var buttonText = document.createElement('span'); | ||
| buttonText.className = 'buttonText'; | ||
| buttonText.innerHTML = 'play'; | ||
| button.appendChild(buttonText); | ||
| // Create a wrapper for our player's metadata | ||
| var meta = document.createElement('div'); | ||
| meta.className = 'metaWrapper'; | ||
| // Create elements to display file metadata | ||
| 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); | ||
| // Progress Indicator | ||
| 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); | ||
| // Volume Indicator | ||
| 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 = 0.1; | ||
| meta_volume_control.className = 'songVolumeSlider'; | ||
| meta_volume_wrapper.appendChild(meta_volume_control); | ||
| meta_volume.appendChild(meta_volume_wrapper); | ||
| // Add the button to the player | ||
| newPlayer.appendChild(button); | ||
| // Add the metadata to the player | ||
| newPlayer.appendChild(meta); | ||
| // Add the timings to the player | ||
| newPlayer.appendChild(timings); | ||
| // Add the volume display to the player | ||
| newPlayer.appendChild(meta_volume); | ||
| // Replace the original audio element with our new creation. | ||
| _data[i].parentNode.replaceChild(newPlayer, _data[i]); | ||
| } | ||
| } | ||
| // Initialize the audio for each file, and setup the event listeners. | ||
| function initAudio(_data) { | ||
| var _myAudio = _data.map(function (item, key) { | ||
| var node = new Audio(); | ||
| // Apply the preload attr. if needed | ||
| if (item.preload) { | ||
| node.preload = item.preload; | ||
| } | ||
| // Add the audio source (by URL) to the audio node | ||
| node.src = item.url; | ||
| // Check if file exists before setting time, to prevent IE11 error | ||
| 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 | ||
| 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; | ||
| }, getMeta: function getMeta(e) { | ||
| var t = {};return t.url = e.src, t.fileType = l.default.getFileType(t.url), t.fileName = l.default.getFileName(t.url), t.title = "" !== e.title ? e.title : t.fileName + "." + t.fileType, t.artist = !!e.dataset.artist && e.dataset.artist, t; | ||
| } };t.default = o; | ||
| }, function (e, t, n) { | ||
| "use strict"; | ||
| Object.defineProperty(t, "__esModule", { value: !0 }), t.PicobelMarkup = void 0;var r = l(n(0)), | ||
| a = l(n(1));function l(e) { | ||
| return e && e.__esModule ? e : { default: e }; | ||
| }var o = t.PicobelMarkup = { buildSlider: function buildSlider() { | ||
| var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "picobel", | ||
| t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, | ||
| n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 100, | ||
| r = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0, | ||
| a = arguments.length > 4 && void 0 !== arguments[4] && arguments[4], | ||
| l = o.createElement("div", e + "-slider__wrapper"), | ||
| i = o.createElement("div", e + "-slider__background");l.appendChild(i);var u = o.createElement("div", e + "-slider__progress-indicator");l.appendChild(u);var s = o.createElement("div", e + "-slider__playhead");l.appendChild(s);var d = o.createElement("input", e + "-slider__range");return d.type = "range", d.min = t, d.max = n, d.value = r, a && (d.step = a), l.appendChild(d), l; | ||
| }, createElement: function createElement() { | ||
| var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "div", | ||
| t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "", | ||
| n = document.createElement(e);return n.className = t, n; | ||
| }, setLengthDisplay: function setLengthDisplay(e) { | ||
| var t = r.default.parseTime(e.duration);e.elements.durationDisplay[0].innerHTML = t; | ||
| }, setMeta: function setMeta(e, t) { | ||
| e.artist && (t.artistDisplay[0].innerHTML = e.artist), t.titleDisplay[0].innerHTML = e.title; | ||
| }, generateMarkup: function generateMarkup() { | ||
| var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : [], | ||
| t = arguments[1];return e.map(function (e) { | ||
| var n, | ||
| r = o.createElement("div"), | ||
| l = a.default.prepareClasses(e.key, e.className, t.theme);(n = r.classList).add.apply(n, function (e) { | ||
| if (Array.isArray(e)) { | ||
| for (var t = 0, n = Array(e.length); t < e.length; t++) { | ||
| n[t] = e[t]; | ||
| }return n; | ||
| }return Array.from(e); | ||
| }(l)), r.setAttribute("data-song-index", e.key);var i = o.createElement("div", "loader");if (r.appendChild(i), t.playPause) { | ||
| var u = o.createElement("button", "playerTrigger"), | ||
| s = o.createElement("span", "buttonText");s.innerHTML = "play", u.appendChild(s), r.appendChild(u); | ||
| }var d = o.createElement("div", "metaWrapper"), | ||
| p = o.createElement("span", "titleDisplay");p.innerHTML = "File " + (e.key + 1), d.appendChild(p);var c = o.createElement("span", "artistDisplay");if (d.appendChild(c), r.appendChild(d), t.progress || t.duration || t.timer) { | ||
| var m = o.createElement("div", "timingsWrapper");if (t.timer) { | ||
| var f = o.createElement("span", "songPlayTimer");f.innerHTML = "0:00", m.appendChild(f); | ||
| }if (t.progress) { | ||
| var v = o.buildSlider("progress", 0, 100, 0);m.appendChild(v); | ||
| }if (t.duration) { | ||
| var y = o.createElement("span", "songDuration");y.innerHTML = "-:--", m.appendChild(y); | ||
| }r.appendChild(m); | ||
| }if (t.volume || t.mute) { | ||
| var g = o.createElement("div", "songVolume");if (t.mute) { | ||
| var h = o.createElement("button", "songMuteButton");h.innerHTML = "Mute", g.appendChild(h); | ||
| }if (t.volume) { | ||
| var P = o.createElement("div", "songVolumeLabelWrapper"), | ||
| b = o.createElement("span", "songVolumeLabel");b.innerHTML = "Volume", P.appendChild(b);var _ = o.createElement("span", "songVolumeValue");_.innerHTML = "10", P.appendChild(_), g.appendChild(P);var M = o.buildSlider("volume", 0, 1, 1, .1);g.appendChild(M); | ||
| }r.appendChild(g); | ||
| }return r; | ||
| }); | ||
| return _myAudio; | ||
| } | ||
| /** | ||
| * ----------------------------- | ||
| * LOADING STATES | ||
| * | ||
| * Handle the buffering of audio | ||
| * data and update displays to | ||
| * show this. | ||
| * ----------------------------- | ||
| */ | ||
| // Fire this event when loading starts [TEST] | ||
| function _loadStart() {} | ||
| // console.log( 'Load start' ); | ||
| // Fire this event when we can play the audio | ||
| // all the way through (ie. it is fully loaded) | ||
| function _canplaythrough() { | ||
| var index = this.getAttribute('data-song-index'); | ||
| _setLengthDisplay(index); | ||
| _removeClass(wrappers[index], 'loading'); | ||
| _getMeta(index); | ||
| } | ||
| // Get info about the audio track, and update the display with this info | ||
| function _getMeta(i) { | ||
| // Get the filename and type | ||
| var url = myAudio[i].src; | ||
| var fileType = _getFileType(url); | ||
| var fileName = _getFileName(url); | ||
| // If there is a valid title, display that title... | ||
| var title = audioElements[i].title; | ||
| if (title !== '') { | ||
| titleDisplay[i].innerHTML = title; | ||
| } else { | ||
| // ...otherwise show the file name. | ||
| titleDisplay[i].innerHTML = fileName + '.' + fileType; | ||
| } | ||
| // If there is a valid 'artist', display the artist name. | ||
| var artist = audioElements[i].getAttribute('data-artist'); | ||
| if (artist !== '') { | ||
| artistDisplay[i].innerHTML = artist; | ||
| } | ||
| // // If the element has a valid class, add that to the player's wrapper | ||
| // var className = audioElements[i].className; | ||
| // if (className != '') { | ||
| // _addClass(wrappers[i], className) | ||
| // } | ||
| } | ||
| /** | ||
| * ----------------------- | ||
| * PLAYBACK SETTING | ||
| * | ||
| * These functions control | ||
| * the functionality of | ||
| * the audio players. | ||
| * ----------------------- | ||
| */ | ||
| // Set all audio elements to 'paused' | ||
| function pauseAll() { | ||
| for (var i = 0; i < data.length; i++) { | ||
| myAudio[i].pause(); | ||
| } | ||
| } | ||
| // Play the selected song | ||
| function playSong(index) { | ||
| currentSongIndex = index; | ||
| for (var i = 0; i < data.length; i++) { | ||
| if (i != index) { | ||
| myAudio[i].pause(); | ||
| } | ||
| } | ||
| myAudio[index].play(); | ||
| } | ||
| // Set the current position of selected song to specific value. | ||
| 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); | ||
| } | ||
| // Volume | ||
| 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 + '%'; | ||
| } | ||
| // Mute | ||
| 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 { | ||
| // myAudio[index].volume = 0; | ||
| 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'; | ||
| } | ||
| } | ||
| // Play or pause a track | ||
| 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'; | ||
| } | ||
| } | ||
| // Toggle 'play' and 'pause' for a track | ||
| 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!'); | ||
| } | ||
| } | ||
| // Toggle 'mute' for a track | ||
| function _muteUnmuteAudio() { | ||
| var targetSong = this.parentNode.parentNode.getAttribute('data-song-index'); | ||
| var buttonText = playPauseButtonsText[targetSong]; | ||
| if (_hasClass(this, 'songMuted')) { | ||
| mute(targetSong, false); | ||
| // _removeClass(this,'songMuted'); | ||
| // _addClass(this,'songUnmuted'); | ||
| // buttonText.innerHTML = 'mute'; | ||
| } else { | ||
| mute(targetSong, true); | ||
| // _addClass(this,'songMuted'); | ||
| // _removeClass(this,'songUnmuted'); | ||
| // buttonText.innerHTML = 'unmute'; | ||
| } | ||
| } | ||
| // Get index of track to be updated, then pass it to _updateProgress() | ||
| function _triggerUpdateProgress() { | ||
| var index = this.getAttribute('data-song-index'); | ||
| _updateProgress(index); | ||
| } | ||
| // Set the value of the current-position display for a playing song | ||
| 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 + '%'; | ||
| } | ||
| // Set the value of the song-length display | ||
| function _setLengthDisplay(index) { | ||
| var songLength = myAudio[index].duration; | ||
| var duration = _parseTime(songLength); | ||
| var songClass = '.song' + index; | ||
| songLengthBox[index].innerHTML = duration; | ||
| } | ||
| /** | ||
| * -------------- | ||
| * ERROR HANDLING | ||
| * | ||
| * Functions that | ||
| * will display a | ||
| * warning notice | ||
| * when any error | ||
| * is triggered. | ||
| * -------------- | ||
| */ | ||
| function _errors(e) { | ||
| // console.log( 'error: ' ); | ||
| // console.log( e.type ); | ||
| var index = this.getAttribute('data-song-index'); | ||
| // console.log( myAudio[index].error ); | ||
| // console.log(e); | ||
| } | ||
| function _error(e) { | ||
| var index = this.getAttribute('data-song-index'); | ||
| var error = myAudio[index].error; | ||
| // console.log( 'error: ' ); | ||
| // console.log(e); | ||
| // console.log( error ); | ||
| } | ||
| function _stalled(e) { | ||
| // console.log( 'stalled!' ); | ||
| var index = this.getAttribute('data-song-index'); | ||
| // console.log( 'Target: ' + index ); | ||
| // console.log( 'Play?: ' + false ); | ||
| playPause(index, false); | ||
| } | ||
| function _waiting() { | ||
| // console.log( 'waiting!' ); | ||
| } | ||
| function _progress(e) { | ||
| var index = this.getAttribute('data-song-index'); | ||
| var readyState = myAudio[index].readyState; | ||
| } | ||
| /** | ||
| * ----------------------------- | ||
| * HELPERS | ||
| * | ||
| * These are basic utilities to | ||
| * parse data, add/remove/toggle | ||
| * classes etc. | ||
| * ----------------------------- | ||
| */ | ||
| // Convert seconds into minutes-and-seconds (MMSS) format | ||
| 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; | ||
| } | ||
| return parsedTime; | ||
| } | ||
| // Does the target element have the target class? | ||
| 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; | ||
| } | ||
| // Add a class to the target element. | ||
| function _addClass(el, className) { | ||
| if (el.classList) { | ||
| el.classList.add(className); | ||
| } else { | ||
| el.className += ' ' + className; | ||
| } | ||
| } | ||
| // Remove a class from the target element. | ||
| 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'), ' '); | ||
| } | ||
| } | ||
| // Get File Type | ||
| function _getFileType(string) { | ||
| return string.substr((~-string.lastIndexOf('.') >>> 0) + 2); | ||
| } | ||
| // Get File Name | ||
| function _getFileName(string) { | ||
| var fullFileName = string.replace(/^.*[\\\/]/, ''); | ||
| var withNoExtension = fullFileName.split('.')[0]; | ||
| return withNoExtension; | ||
| } | ||
| /** | ||
| * ---------------------- | ||
| * PUBLIC METHODS | ||
| * | ||
| * Declare the methods we | ||
| * want to be accessible | ||
| * from outside scope. | ||
| * ---------------------- | ||
| */ | ||
| return { | ||
| sliderScrub: sliderScrub, | ||
| playSong: playSong, | ||
| pauseAll: pauseAll | ||
| }, elementHooks: function elementHooks(e) { | ||
| return e.map(function (e) { | ||
| var t = document.querySelectorAll("[data-song-index='" + e.key + "']");return e.elements = { wrapper: t[0], playPauseButton: t[0].querySelectorAll(".playerTrigger"), muteButton: t[0].querySelectorAll(".songMuteButton"), playPauseButtonText: t[0].querySelectorAll(".buttonText"), playTimer: t[0].querySelectorAll(".songPlayTimer"), durationDisplay: t[0].querySelectorAll(".songDuration"), titleDisplay: t[0].querySelectorAll(".titleDisplay"), artistDisplay: t[0].querySelectorAll(".artistDisplay"), progressBar: t[0].querySelectorAll(".progress-slider__range"), playhead: t[0].querySelectorAll(".progress-slider__playhead"), indicator: t[0].querySelectorAll(".progress-slider__progress-indicator"), volumeControl: t[0].querySelectorAll(".volume-slider__range"), volumeDisplay: t[0].querySelectorAll(".songVolumeValue"), volumeIndicator: t[0].querySelectorAll(".volume-slider__progress-indicator"), volumePlayhead: t[0].querySelectorAll(".volume-slider__playhead") }, e; | ||
| }); | ||
| } };t.default = o; | ||
| }, function (e, t, n) { | ||
| "use strict"; | ||
| Object.defineProperty(t, "__esModule", { value: !0 });var r = { parseOptions: function parseOptions() { | ||
| var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};return Object.assign({ theme: "default", preload: !1, components: { theme: "default", playPause: !0, progress: !0, volume: !0, download: !1, mute: !0, duration: !0, timer: !0 } }, e); | ||
| }, setState: function setState(e, t) { | ||
| return Object.assign(e, t); | ||
| }, setComponentsByTheme: function setComponentsByTheme() { | ||
| var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "default", | ||
| t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, | ||
| n = { theme: e, playPause: !0, progress: !0, volume: !0, download: !1, mute: !0, duration: !0, timer: !0 };return Object.assign(n, t); | ||
| } };t.default = r; | ||
| }, function (e, t, n) { | ||
| "use strict"; | ||
| Object.defineProperty(t, "__esModule", { value: !0 });var r = i(n(0)), | ||
| a = i(n(3)), | ||
| l = i(n(1)), | ||
| o = i(n(2));function i(e) { | ||
| return e && e.__esModule ? e : { default: e }; | ||
| }t.default = function () { | ||
| var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, | ||
| t = a.default.parseOptions(e), | ||
| n = a.default.setState({}, { audioNodes: [] }), | ||
| i = { pauseAll: function pauseAll() { | ||
| n.audioNodes.map(function (e) { | ||
| i.pause(e); | ||
| }); | ||
| }, triggerPlayPauseAudio: function triggerPlayPauseAudio(e) { | ||
| var t = r.default.findParentIndex(e.srcElement), | ||
| a = n.audioNodes.find(function (e) { | ||
| return e.key == t; | ||
| });i.playPauseAudio(a); | ||
| }, playPauseAudio: function playPauseAudio(e) { | ||
| e.paused || 0 === e.currentTime ? (i.pauseAll(), i.play(e)) : i.pause(e); | ||
| }, play: function play(e) { | ||
| e.play();var t = e.elements.playPauseButton[0];t.classList.remove("songPaused"), t.classList.add("songPlaying"); | ||
| }, pause: function pause(e) { | ||
| e.pause();var t = e.elements.playPauseButton[0];t.classList.remove("songPlaying"), t.classList.add("songPaused"); | ||
| }, triggerUpdateProgress: function triggerUpdateProgress(e) { | ||
| return i.updateProgress(e.srcElement); | ||
| }, updateProgress: function updateProgress(e) { | ||
| var t = e.currentTime, | ||
| n = e.duration, | ||
| a = r.default.parseTime(t);e.elements.playTimer[0].innerHTML = a, t >= n && e.elements.playPauseButton[0].classList.remove("songPlaying");var l = (t / n * 100).toFixed(2);e.elements.progressBar[0].value = l, e.elements.indicator[0].style.width = l + "%", e.elements.playhead[0].style.left = l + "%"; | ||
| }, loadStart: function loadStart() {}, canplaythrough: function canplaythrough() { | ||
| o.default.setLengthDisplay(this), this.elements.wrapper.classList.remove("loading");var e = l.default.getMeta(this);o.default.setMeta(e, this.elements); | ||
| }, errors: function errors(e) {}, stalled: function stalled() {}, progress: function progress() {}, sliderScrub: function sliderScrub(e) { | ||
| var t = r.default.findParentIndex(e.srcElement), | ||
| a = n.audioNodes.find(function (e) { | ||
| return e.key == t; | ||
| }), | ||
| l = a.duration * (e.srcElement.value / 100);l = l.toFixed(2), a.currentTime = l, i.updateProgress(a); | ||
| }, volume: function volume(e) { | ||
| var t = r.default.findParentIndex(e.srcElement), | ||
| a = n.audioNodes.find(function (e) { | ||
| return e.key == t; | ||
| }), | ||
| l = e.srcElement.value;i.mute(a, !1), i.setVolume(a, l); | ||
| }, setVolume: function setVolume(e, t) { | ||
| var n = 10 * t, | ||
| r = 100 * t;e.volume = t, e.elements.volumeDisplay[0].innerHTML = n, e.elements.volumeControl[0].value = t, e.elements.volumeIndicator[0].style.width = r + "%", e.elements.volumePlayhead[0].style.left = r + "%"; | ||
| }, muteUnmuteAudio: function muteUnmuteAudio(e) { | ||
| var t = r.default.findParentIndex(e.srcElement), | ||
| a = n.audioNodes.find(function (e) { | ||
| return e.key == t; | ||
| });a.mute = !a.mute, i.mute(a, a.mute); | ||
| }, mute: function mute(e, t) { | ||
| var n = e.elements.muteButton[0];e.mute ? (e.tmpVolume = e.volume, i.setVolume(e, 0), n.classList.add("songMuted"), n.classList.remove("songUnmuted"), n.innerHTML = "unmute") : (void 0 !== e.tmpVolume && e.tmpVolume > 0 ? i.setVolume(e, e.tmpVolume) : i.setVolume(e, 1), n.classList.remove("songMuted"), n.classList.add("songUnmuted"), n.innerHTML = "mute"); | ||
| } };(n = a.default.setState(n, { theme: t.theme, components: t.components })).components = a.default.setComponentsByTheme(n.theme, e.components), n.audioNodes = l.default.findAudio(), n.audioNodes = l.default.getRawData(n.audioNodes);var u, | ||
| s, | ||
| d = o.default.generateMarkup(n.audioNodes, n.components);return u = n.audioNodes, s = d, u.map(function (e, t) { | ||
| e.parentNode.replaceChild(s[t], e); | ||
| }), n.audioNodes = o.default.elementHooks(n.audioNodes), n.audioNodes = n.audioNodes.map(function (e, t) { | ||
| return e.addEventListener("timeupdate", i.triggerUpdateProgress, !1), e.addEventListener("loadstart", i.loadStart, !1), e.addEventListener("canplaythrough", i.canplaythrough, !1), e.addEventListener("error", i.errors, !1), e.addEventListener("stalled", i.stalled, !1), e.addEventListener("waiting", i.errors, !1), e.addEventListener("progress", i.progress, !1), e.elements.playPauseButton[0].addEventListener("click", i.triggerPlayPauseAudio, !1), e.elements.progressBar[0].addEventListener("input", i.sliderScrub, !1), e.elements.volumeControl[0].addEventListener("input", i.volume, !1), e.elements.muteButton[0].addEventListener("click", i.muteUnmuteAudio, !1), e; | ||
| }), { state: n, PicobelAudio: i }; | ||
| }; | ||
| } | ||
| exports.default = Picobel; | ||
| }]); | ||
| }); |
@@ -1,5 +0,15 @@ | ||
| import Picobel from '../esm/picobel'; | ||
| import Picobel from '../esm/Picobel'; | ||
| // import helpers from '../esm/helpers'; | ||
| // import 'picobel/css/player.default.css'; | ||
| console.log('file loaded'); | ||
| Picobel(); | ||
| // console.log('file loaded'); | ||
| let picobel_instance = Picobel({ theme: 'skeleton' }); | ||
| console.log(picobel_instance.state); | ||
| // let slider = helpers.buildSlider('progress', 0, 100, 50); | ||
| // console.dir(slider.children[3]); | ||
| // let nodes = picobel_instance.findAudio(document); | ||
| // console.log(nodes); | ||
| // console.log(picobel_instance.state); |
@@ -19,3 +19,4 @@ const path = require('path'); | ||
| ] | ||
| } | ||
| }, | ||
| devtool: 'source-map' | ||
| }; |
@@ -1,646 +0,1 @@ | ||
| /** | ||
| * ----------------------------------------- | ||
| * ____ _ _ _ _ | ||
| * | _ \(_) ___ ___ | |__ ___| | (_)___ | ||
| * | |_) | |/ __/ _ \| '_ \ / _ \ | | / __| | ||
| * | __/| | (_| (_) | |_) | __/ |_ | \__ \ | ||
| * |_| |_|\___\___/|_.__/ \___|_(_)| |___/ | ||
| * Picobel.js _/ | | ||
| * tomhazledine.com/audio |__/ | ||
| * | ||
| * ========================================= | ||
| * | ||
| * Replace any native <audio> instances with | ||
| * standard elements (spans, buttons & divs) | ||
| * that we can style however we like. | ||
| * | ||
| * Functionality powered by Web Audio API. | ||
| * ----------------------------------------- | ||
| */ | ||
| function Picobel(options) { | ||
| /** | ||
| * ----------------------- | ||
| * PARSE OPTIONS | ||
| * | ||
| * Make sure we have valid | ||
| * options. If we don't we | ||
| * should provide sensible | ||
| * fallbacks. | ||
| * ----------------------- | ||
| */ | ||
| options = typeof options !== 'undefined' ? options : {}; | ||
| options.theme = options.theme || 'defaultPlayerTheme'; | ||
| // Setting a value for `preload` here will override the audio element's value. | ||
| options.preload = options.preload || false; | ||
| /** | ||
| * --------------------------------------------- | ||
| * MAKE STUFF HAPPEN | ||
| * | ||
| * The following lines initialize functions we | ||
| * declare further down the file. We need to | ||
| * call them in a specific order (so things like | ||
| * element-selection work properly). | ||
| * --------------------------------------------- | ||
| */ | ||
| // Find all the elements and store them | ||
| // in an array (for easy access). | ||
| let audioElements = findAudio(); | ||
| // Get our data from those elements. | ||
| let data = getRawData(audioElements); | ||
| // Replace those elements with our own custom markup. | ||
| buildMarkup(audioElements); | ||
| // 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'); | ||
| // Initialize the audio. | ||
| 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) | ||
| let currentSongIndex = 0; | ||
| /** | ||
| * --------------------------------- | ||
| * SETUP | ||
| * | ||
| * These functions find our targets, | ||
| * generate our elements, and set up | ||
| * our environment. | ||
| * --------------------------------- | ||
| */ | ||
| // Return an array of all the <audio> elements found on the page. | ||
| function findAudio() { | ||
| // Get all the <audio> occurrences in the page. | ||
| let 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); | ||
| return items; | ||
| } | ||
| // Get the url for each audio file | ||
| // we want to load [using elements | ||
| // found by findAudio()] | ||
| function getRawData(_data) { | ||
| let output = _data.map(item => ({ | ||
| preload: options.preload ? options.preload : item.preload, | ||
| url: item.src | ||
| })); | ||
| return output; | ||
| } | ||
| // Create our own markup in place of the native <audio> elements. | ||
| function buildMarkup(_data) { | ||
| for (let i = 0; i < _data.length; i++) { | ||
| // Create a container for our new player | ||
| 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 | ||
| let className = audioElements[i].className; | ||
| if (className !== '') { | ||
| _addClass(newPlayer, className); | ||
| } | ||
| // Add the class set in our options. | ||
| _addClass(newPlayer, options.theme); | ||
| newPlayer.setAttribute('data-song-index', i); | ||
| // Create a loading indicator | ||
| let loading = document.createElement('div'); | ||
| loading.className = 'loader'; | ||
| newPlayer.appendChild(loading); | ||
| // Add "waiting" indicator here. | ||
| // Create a play/pause button | ||
| let button = document.createElement('button'); | ||
| button.className = 'playerTrigger'; | ||
| let buttonText = document.createElement('span'); | ||
| buttonText.className = 'buttonText'; | ||
| buttonText.innerHTML = 'play'; | ||
| button.appendChild(buttonText); | ||
| // Create a wrapper for our player's metadata | ||
| let meta = document.createElement('div'); | ||
| meta.className = 'metaWrapper'; | ||
| // Create elements to display file metadata | ||
| let meta_title = document.createElement('span'); | ||
| meta_title.className = 'titleDisplay'; | ||
| meta_title.innerHTML = 'File ' + (i + 1); | ||
| meta.appendChild(meta_title); | ||
| let meta_artist = document.createElement('span'); | ||
| meta_artist.className = 'artistDisplay'; | ||
| meta.appendChild(meta_artist); | ||
| let timings = document.createElement('div'); | ||
| timings.className = 'timingsWrapper'; | ||
| let meta_timer = document.createElement('span'); | ||
| meta_timer.className = 'songPlayTimer'; | ||
| meta_timer.innerHTML = '0:00'; | ||
| timings.appendChild(meta_timer); | ||
| // Progress Indicator | ||
| let meta_progress_wrapper = document.createElement('div'); | ||
| meta_progress_wrapper.className = 'songProgressSliderWrapper'; | ||
| let 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'); | ||
| meta_pseudo_progress_indicator.className = 'pseudoProgressIndicator'; | ||
| meta_progress_wrapper.appendChild(meta_pseudo_progress_indicator); | ||
| let 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'); | ||
| 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); | ||
| let meta_duration = document.createElement('span'); | ||
| meta_duration.className = 'songDuration'; | ||
| meta_duration.innerHTML = '-:--'; | ||
| timings.appendChild(meta_duration); | ||
| // Volume Indicator | ||
| let meta_volume = document.createElement('div'); | ||
| meta_volume.className = 'songVolume'; | ||
| let 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'); | ||
| meta_volume_label_wrapper.className = 'songVolumeLabelWrapper'; | ||
| 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); | ||
| let 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); | ||
| let meta_volume_wrapper = document.createElement('div'); | ||
| meta_volume_wrapper.className = 'songVolumeSliderWrapper'; | ||
| let 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'); | ||
| meta_pseudo_volume_indicator.className = 'pseudoVolumeIndicator'; | ||
| meta_volume_wrapper.appendChild(meta_pseudo_volume_indicator); | ||
| let 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'); | ||
| meta_volume_control.type = 'range'; | ||
| meta_volume_control.min = 0; | ||
| meta_volume_control.max = 1; | ||
| meta_volume_control.value = 1; | ||
| meta_volume_control.step = 0.1; | ||
| meta_volume_control.className = 'songVolumeSlider'; | ||
| meta_volume_wrapper.appendChild(meta_volume_control); | ||
| meta_volume.appendChild(meta_volume_wrapper); | ||
| // Add the button to the player | ||
| newPlayer.appendChild(button); | ||
| // Add the metadata to the player | ||
| newPlayer.appendChild(meta); | ||
| // Add the timings to the player | ||
| newPlayer.appendChild(timings); | ||
| // Add the volume display to the player | ||
| newPlayer.appendChild(meta_volume); | ||
| // Replace the original audio element with our new creation. | ||
| _data[i].parentNode.replaceChild(newPlayer, _data[i]); | ||
| } | ||
| } | ||
| // Initialize the audio for each file, and setup the event listeners. | ||
| function initAudio(_data) { | ||
| let _myAudio = _data.map((item, key) => { | ||
| let node = new Audio(); | ||
| // Apply the preload attr. if needed | ||
| if (item.preload) { | ||
| node.preload = item.preload; | ||
| } | ||
| // Add the audio source (by URL) to the audio node | ||
| node.src = item.url; | ||
| // Check if file exists before setting time, to prevent IE11 error | ||
| 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 | ||
| 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; | ||
| } | ||
| /** | ||
| * ----------------------------- | ||
| * LOADING STATES | ||
| * | ||
| * Handle the buffering of audio | ||
| * data and update displays to | ||
| * show this. | ||
| * ----------------------------- | ||
| */ | ||
| // Fire this event when loading starts [TEST] | ||
| function _loadStart() {} | ||
| // console.log( 'Load start' ); | ||
| // 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'); | ||
| _setLengthDisplay(index); | ||
| _removeClass(wrappers[index], 'loading'); | ||
| _getMeta(index); | ||
| } | ||
| // Get info about the audio track, and update the display with this info | ||
| function _getMeta(i) { | ||
| // Get the filename and type | ||
| let url = myAudio[i].src; | ||
| let fileType = _getFileType(url); | ||
| let fileName = _getFileName(url); | ||
| // If there is a valid title, display that title... | ||
| let title = audioElements[i].title; | ||
| if (title !== '') { | ||
| titleDisplay[i].innerHTML = title; | ||
| } else { | ||
| // ...otherwise show the file name. | ||
| titleDisplay[i].innerHTML = fileName + '.' + fileType; | ||
| } | ||
| // If there is a valid 'artist', display the artist name. | ||
| let artist = audioElements[i].getAttribute('data-artist'); | ||
| if (artist !== '') { | ||
| artistDisplay[i].innerHTML = artist; | ||
| } | ||
| // // If the element has a valid class, add that to the player's wrapper | ||
| // var className = audioElements[i].className; | ||
| // if (className != '') { | ||
| // _addClass(wrappers[i], className) | ||
| // } | ||
| } | ||
| /** | ||
| * ----------------------- | ||
| * PLAYBACK SETTING | ||
| * | ||
| * These functions control | ||
| * the functionality of | ||
| * the audio players. | ||
| * ----------------------- | ||
| */ | ||
| // Set all audio elements to 'paused' | ||
| function pauseAll() { | ||
| for (let i = 0; i < data.length; i++) { | ||
| myAudio[i].pause(); | ||
| } | ||
| } | ||
| // Play the selected song | ||
| function playSong(index) { | ||
| currentSongIndex = index; | ||
| for (let i = 0; i < data.length; i++) { | ||
| if (i != index) { | ||
| myAudio[i].pause(); | ||
| } | ||
| } | ||
| myAudio[index].play(); | ||
| } | ||
| // Set the current position of selected song to specific value. | ||
| 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); | ||
| targetTime = targetTime.toFixed(2); | ||
| myAudio[index].currentTime = targetTime; | ||
| _updateProgress(index); | ||
| } | ||
| // Volume | ||
| function volume() { | ||
| let value = this.value; | ||
| let index = this.parentNode.parentNode.parentNode.getAttribute('data-song-index'); | ||
| mute(index, false); | ||
| setVolume(index, value); | ||
| } | ||
| function setVolume(index, value) { | ||
| let valueMapped = value * 10; | ||
| let 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 + '%'; | ||
| } | ||
| // Mute | ||
| function mute(index, state) { | ||
| let oldVolume; | ||
| 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 { | ||
| // myAudio[index].volume = 0; | ||
| 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'; | ||
| } | ||
| } | ||
| // Play or pause a track | ||
| function playPause(index, state) { | ||
| let buttonText = playPauseButtonsText[index]; | ||
| let target = playPauseButtons[index]; | ||
| if (state) { | ||
| for (let 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'; | ||
| } | ||
| } | ||
| // Toggle 'play' and 'pause' for a track | ||
| function _playPauseAudio() { | ||
| let targetSong = this.parentNode.getAttribute('data-song-index'); | ||
| if (typeof targetSong != 'undefined') { | ||
| let playSong = _hasClass(this, 'songPlaying') ? false : true; | ||
| playPause(targetSong, playSong); | ||
| } else { | ||
| console.log('too soon to play!'); | ||
| } | ||
| } | ||
| // Toggle 'mute' for a track | ||
| function _muteUnmuteAudio() { | ||
| let targetSong = this.parentNode.parentNode.getAttribute('data-song-index'); | ||
| let buttonText = playPauseButtonsText[targetSong]; | ||
| if (_hasClass(this, 'songMuted')) { | ||
| mute(targetSong, false); | ||
| // _removeClass(this,'songMuted'); | ||
| // _addClass(this,'songUnmuted'); | ||
| // buttonText.innerHTML = 'mute'; | ||
| } else { | ||
| mute(targetSong, true); | ||
| // _addClass(this,'songMuted'); | ||
| // _removeClass(this,'songUnmuted'); | ||
| // buttonText.innerHTML = 'unmute'; | ||
| } | ||
| } | ||
| // Get index of track to be updated, then pass it to _updateProgress() | ||
| function _triggerUpdateProgress() { | ||
| let index = this.getAttribute('data-song-index'); | ||
| _updateProgress(index); | ||
| } | ||
| // Set the value of the current-position display for a playing song | ||
| function _updateProgress(index) { | ||
| let progress = myAudio[index].currentTime; | ||
| let duration = myAudio[index].duration; | ||
| let progressParsed = _parseTime(progress); | ||
| playTimer[index].innerHTML = progressParsed; | ||
| if (progress >= duration) { | ||
| _removeClass(playPauseButtons[index], 'songPlaying'); | ||
| } | ||
| let progressPercent = (progress / duration * 100).toFixed(2); | ||
| progressBar[index].value = progressPercent; | ||
| indicator[index].style.width = progressPercent + '%'; | ||
| playhead[index].style.left = progressPercent + '%'; | ||
| } | ||
| // Set the value of the song-length display | ||
| function _setLengthDisplay(index) { | ||
| let songLength = myAudio[index].duration; | ||
| let duration = _parseTime(songLength); | ||
| let songClass = '.song' + index; | ||
| songLengthBox[index].innerHTML = duration; | ||
| } | ||
| /** | ||
| * -------------- | ||
| * ERROR HANDLING | ||
| * | ||
| * Functions that | ||
| * will display a | ||
| * warning notice | ||
| * when any error | ||
| * is triggered. | ||
| * -------------- | ||
| */ | ||
| function _errors(e) { | ||
| // console.log( 'error: ' ); | ||
| // console.log( e.type ); | ||
| let index = this.getAttribute('data-song-index'); | ||
| // console.log( myAudio[index].error ); | ||
| // console.log(e); | ||
| } | ||
| function _error(e) { | ||
| let index = this.getAttribute('data-song-index'); | ||
| let error = myAudio[index].error; | ||
| // console.log( 'error: ' ); | ||
| // console.log(e); | ||
| // console.log( error ); | ||
| } | ||
| function _stalled(e) { | ||
| // console.log( 'stalled!' ); | ||
| let index = this.getAttribute('data-song-index'); | ||
| // console.log( 'Target: ' + index ); | ||
| // console.log( 'Play?: ' + false ); | ||
| playPause(index, false); | ||
| } | ||
| function _waiting() { | ||
| // console.log( 'waiting!' ); | ||
| } | ||
| function _progress(e) { | ||
| let index = this.getAttribute('data-song-index'); | ||
| let readyState = myAudio[index].readyState; | ||
| } | ||
| /** | ||
| * ----------------------------- | ||
| * HELPERS | ||
| * | ||
| * These are basic utilities to | ||
| * parse data, add/remove/toggle | ||
| * classes etc. | ||
| * ----------------------------- | ||
| */ | ||
| // Convert seconds into minutes-and-seconds (MMSS) format | ||
| 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}`; | ||
| } | ||
| return parsedTime; | ||
| } | ||
| // Does the target element have the target class? | ||
| function _hasClass(el, className) { | ||
| let result; | ||
| if (el.classList) { | ||
| result = el.classList.contains(className); | ||
| } else { | ||
| result = new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); | ||
| } | ||
| return result; | ||
| } | ||
| // Add a class to the target element. | ||
| function _addClass(el, className) { | ||
| if (el.classList) { | ||
| el.classList.add(className); | ||
| } else { | ||
| el.className += ' ' + className; | ||
| } | ||
| } | ||
| // Remove a class from the target element. | ||
| 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'), | ||
| ' ' | ||
| ); | ||
| } | ||
| } | ||
| // Get File Type | ||
| function _getFileType(string) { | ||
| return string.substr((~-string.lastIndexOf('.') >>> 0) + 2); | ||
| } | ||
| // Get File Name | ||
| function _getFileName(string) { | ||
| let fullFileName = string.replace(/^.*[\\\/]/, ''); | ||
| let withNoExtension = fullFileName.split('.')[0]; | ||
| return withNoExtension; | ||
| } | ||
| /** | ||
| * ---------------------- | ||
| * PUBLIC METHODS | ||
| * | ||
| * Declare the methods we | ||
| * want to be accessible | ||
| * from outside scope. | ||
| * ---------------------- | ||
| */ | ||
| return { | ||
| sliderScrub: sliderScrub, | ||
| playSong: playSong, | ||
| pauseAll: pauseAll | ||
| }; | ||
| } | ||
| export default Picobel; | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("picobel",[],t):"object"==typeof exports?exports.picobel=t():e.picobel=t()}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={parseTime:function(e){var t=Math.floor(e/3600),n=Math.floor(e%3600/60).toFixed(0).toString(),r=Math.floor(e%3600%60).toFixed(0).toString(),a=n+":"+(r=r>=10?r:"0"+r);return t>0&&(a=t+":"+(n=n>=10?n:"0"+n)+":"+r),a},getFileType:function(e){return e.substr(2+(~-e.lastIndexOf(".")>>>0))},getFileName:function(e){return e.replace(/^.*[\\\/]/,"").split(".")[0]},findParentIndex:function(e){return void 0!==e.dataset.songIndex?e.dataset.songIndex:void 0!==e.parentNode&&void 0!==e.parentNode.dataset&&r.findParentIndex(e.parentNode)}};t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,a=n(0),l=(r=a)&&r.__esModule?r:{default:r};var o={findAudio:function(){var e=document.getElementsByTagName("audio");return[].slice.call(e)},prepareClasses:function(e,t,n){var r=("customAudioPlayer loading player_"+e+" "+t).trim().split(" ");return r.push(n),r},getRawData:function(e){return e.map(function(e,t){return e.key=t,e.mute=!1,e.tmpVolume=1,e})},getMeta:function(e){var t={};return t.url=e.src,t.fileType=l.default.getFileType(t.url),t.fileName=l.default.getFileName(t.url),t.title=""!==e.title?e.title:t.fileName+"."+t.fileType,t.artist=!!e.dataset.artist&&e.dataset.artist,t}};t.default=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.PicobelMarkup=void 0;var r=l(n(0)),a=l(n(1));function l(e){return e&&e.__esModule?e:{default:e}}var o=t.PicobelMarkup={buildSlider:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"picobel",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:100,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,a=arguments.length>4&&void 0!==arguments[4]&&arguments[4],l=o.createElement("div",e+"-slider__wrapper"),i=o.createElement("div",e+"-slider__background");l.appendChild(i);var u=o.createElement("div",e+"-slider__progress-indicator");l.appendChild(u);var s=o.createElement("div",e+"-slider__playhead");l.appendChild(s);var d=o.createElement("input",e+"-slider__range");return d.type="range",d.min=t,d.max=n,d.value=r,a&&(d.step=a),l.appendChild(d),l},createElement:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"div",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=document.createElement(e);return n.className=t,n},setLengthDisplay:function(e){var t=r.default.parseTime(e.duration);e.elements.durationDisplay[0].innerHTML=t},setMeta:function(e,t){e.artist&&(t.artistDisplay[0].innerHTML=e.artist),t.titleDisplay[0].innerHTML=e.title},generateMarkup:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];return e.map(function(e){var n,r=o.createElement("div"),l=a.default.prepareClasses(e.key,e.className,t.theme);(n=r.classList).add.apply(n,function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}(l)),r.setAttribute("data-song-index",e.key);var i=o.createElement("div","loader");if(r.appendChild(i),t.playPause){var u=o.createElement("button","playerTrigger"),s=o.createElement("span","buttonText");s.innerHTML="play",u.appendChild(s),r.appendChild(u)}var d=o.createElement("div","metaWrapper"),p=o.createElement("span","titleDisplay");p.innerHTML="File "+(e.key+1),d.appendChild(p);var c=o.createElement("span","artistDisplay");if(d.appendChild(c),r.appendChild(d),t.progress||t.duration||t.timer){var m=o.createElement("div","timingsWrapper");if(t.timer){var f=o.createElement("span","songPlayTimer");f.innerHTML="0:00",m.appendChild(f)}if(t.progress){var v=o.buildSlider("progress",0,100,0);m.appendChild(v)}if(t.duration){var y=o.createElement("span","songDuration");y.innerHTML="-:--",m.appendChild(y)}r.appendChild(m)}if(t.volume||t.mute){var g=o.createElement("div","songVolume");if(t.mute){var h=o.createElement("button","songMuteButton");h.innerHTML="Mute",g.appendChild(h)}if(t.volume){var P=o.createElement("div","songVolumeLabelWrapper"),b=o.createElement("span","songVolumeLabel");b.innerHTML="Volume",P.appendChild(b);var _=o.createElement("span","songVolumeValue");_.innerHTML="10",P.appendChild(_),g.appendChild(P);var M=o.buildSlider("volume",0,1,1,.1);g.appendChild(M)}r.appendChild(g)}return r})},elementHooks:function(e){return e.map(function(e){var t=document.querySelectorAll("[data-song-index='"+e.key+"']");return e.elements={wrapper:t[0],playPauseButton:t[0].querySelectorAll(".playerTrigger"),muteButton:t[0].querySelectorAll(".songMuteButton"),playPauseButtonText:t[0].querySelectorAll(".buttonText"),playTimer:t[0].querySelectorAll(".songPlayTimer"),durationDisplay:t[0].querySelectorAll(".songDuration"),titleDisplay:t[0].querySelectorAll(".titleDisplay"),artistDisplay:t[0].querySelectorAll(".artistDisplay"),progressBar:t[0].querySelectorAll(".progress-slider__range"),playhead:t[0].querySelectorAll(".progress-slider__playhead"),indicator:t[0].querySelectorAll(".progress-slider__progress-indicator"),volumeControl:t[0].querySelectorAll(".volume-slider__range"),volumeDisplay:t[0].querySelectorAll(".songVolumeValue"),volumeIndicator:t[0].querySelectorAll(".volume-slider__progress-indicator"),volumePlayhead:t[0].querySelectorAll(".volume-slider__playhead")},e})}};t.default=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={parseOptions:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return Object.assign({theme:"default",preload:!1,components:{theme:"default",playPause:!0,progress:!0,volume:!0,download:!1,mute:!0,duration:!0,timer:!0}},e)},setState:function(e,t){return Object.assign(e,t)},setComponentsByTheme:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={theme:e,playPause:!0,progress:!0,volume:!0,download:!1,mute:!0,duration:!0,timer:!0};return Object.assign(n,t)}};t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=i(n(0)),a=i(n(3)),l=i(n(1)),o=i(n(2));function i(e){return e&&e.__esModule?e:{default:e}}t.default=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=a.default.parseOptions(e),n=a.default.setState({},{audioNodes:[]}),i={pauseAll:function(){n.audioNodes.map(function(e){i.pause(e)})},triggerPlayPauseAudio:function(e){var t=r.default.findParentIndex(e.srcElement),a=n.audioNodes.find(function(e){return e.key==t});i.playPauseAudio(a)},playPauseAudio:function(e){e.paused||0===e.currentTime?(i.pauseAll(),i.play(e)):i.pause(e)},play:function(e){e.play();var t=e.elements.playPauseButton[0];t.classList.remove("songPaused"),t.classList.add("songPlaying")},pause:function(e){e.pause();var t=e.elements.playPauseButton[0];t.classList.remove("songPlaying"),t.classList.add("songPaused")},triggerUpdateProgress:function(e){return i.updateProgress(e.srcElement)},updateProgress:function(e){var t=e.currentTime,n=e.duration,a=r.default.parseTime(t);e.elements.playTimer[0].innerHTML=a,t>=n&&e.elements.playPauseButton[0].classList.remove("songPlaying");var l=(t/n*100).toFixed(2);e.elements.progressBar[0].value=l,e.elements.indicator[0].style.width=l+"%",e.elements.playhead[0].style.left=l+"%"},loadStart:function(){},canplaythrough:function(){o.default.setLengthDisplay(this),this.elements.wrapper.classList.remove("loading");var e=l.default.getMeta(this);o.default.setMeta(e,this.elements)},errors:function(e){},stalled:function(){},progress:function(){},sliderScrub:function(e){var t=r.default.findParentIndex(e.srcElement),a=n.audioNodes.find(function(e){return e.key==t}),l=a.duration*(e.srcElement.value/100);l=l.toFixed(2),a.currentTime=l,i.updateProgress(a)},volume:function(e){var t=r.default.findParentIndex(e.srcElement),a=n.audioNodes.find(function(e){return e.key==t}),l=e.srcElement.value;i.mute(a,!1),i.setVolume(a,l)},setVolume:function(e,t){var n=10*t,r=100*t;e.volume=t,e.elements.volumeDisplay[0].innerHTML=n,e.elements.volumeControl[0].value=t,e.elements.volumeIndicator[0].style.width=r+"%",e.elements.volumePlayhead[0].style.left=r+"%"},muteUnmuteAudio:function(e){var t=r.default.findParentIndex(e.srcElement),a=n.audioNodes.find(function(e){return e.key==t});a.mute=!a.mute,i.mute(a,a.mute)},mute:function(e,t){var n=e.elements.muteButton[0];e.mute?(e.tmpVolume=e.volume,i.setVolume(e,0),n.classList.add("songMuted"),n.classList.remove("songUnmuted"),n.innerHTML="unmute"):(void 0!==e.tmpVolume&&e.tmpVolume>0?i.setVolume(e,e.tmpVolume):i.setVolume(e,1),n.classList.remove("songMuted"),n.classList.add("songUnmuted"),n.innerHTML="mute")}};(n=a.default.setState(n,{theme:t.theme,components:t.components})).components=a.default.setComponentsByTheme(n.theme,e.components),n.audioNodes=l.default.findAudio(),n.audioNodes=l.default.getRawData(n.audioNodes);var u,s,d=o.default.generateMarkup(n.audioNodes,n.components);return u=n.audioNodes,s=d,u.map(function(e,t){e.parentNode.replaceChild(s[t],e)}),n.audioNodes=o.default.elementHooks(n.audioNodes),n.audioNodes=n.audioNodes.map(function(e,t){return e.addEventListener("timeupdate",i.triggerUpdateProgress,!1),e.addEventListener("loadstart",i.loadStart,!1),e.addEventListener("canplaythrough",i.canplaythrough,!1),e.addEventListener("error",i.errors,!1),e.addEventListener("stalled",i.stalled,!1),e.addEventListener("waiting",i.errors,!1),e.addEventListener("progress",i.progress,!1),e.elements.playPauseButton[0].addEventListener("click",i.triggerPlayPauseAudio,!1),e.elements.progressBar[0].addEventListener("input",i.sliderScrub,!1),e.elements.volumeControl[0].addEventListener("input",i.volume,!1),e.elements.muteButton[0].addEventListener("click",i.muteUnmuteAudio,!1),e}),{state:n,PicobelAudio:i}}}])}); |
| { | ||
| "name": "picobel", | ||
| "version": "1.0.11", | ||
| "version": "2.0.0", | ||
| "description": "Convert html audio tags into styleable markup.", | ||
@@ -8,3 +8,5 @@ "main": "./cjs/picobel.js", | ||
| "scripts": { | ||
| "build": "babel esm --out-dir cjs && npm run styles", | ||
| "test": "jest --verbose", | ||
| "build": "webpack --mode production && npm run styles && npm run common", | ||
| "common": "babel esm --out-dir cjs", | ||
| "prepublishOnly": "npm run build", | ||
@@ -29,6 +31,11 @@ "styles": "npm run sass && npm run autoprefix", | ||
| "babel-cli": "^6.26.0", | ||
| "babel-jest": "^23.0.1", | ||
| "babel-loader": "^7.1.4", | ||
| "babel-preset-env": "^1.7.0", | ||
| "jest": "^23.0.1", | ||
| "node-sass": "^4.9.0", | ||
| "postcss-cli": "^5.0.0", | ||
| "uglify-js": "^3.3.28" | ||
| "uglify-js": "^3.3.28", | ||
| "webpack": "^4.12.0", | ||
| "webpack-cli": "^3.0.3" | ||
| }, | ||
@@ -35,0 +42,0 @@ "babel": { |
@@ -51,3 +51,3 @@ <p align="center"><a href="https://audio.tomhazledine.com" target="_blank"><img width="200"src="https://audio.tomhazledine.com/assets/images/heroLogo.png"></a></p> | ||
| // ...or initialise Picobel with your chosen options: | ||
| Picobel({ themename: 'default' }) | ||
| Picobel({ theme: 'default' }) | ||
@@ -147,10 +147,10 @@ If you are using WebPack (or similar) to bundle your scripts, you can include the stylesheet for your chosen Picobel theme here too: | ||
| Picobel comes with many pre-made themes. To use a theme, make sure you've downloaded the correct stylesheet from the [Picobel CSS library](https://github.com/tomhazledine/picobel/tree/master/css) and then reference the chosen themename as an option when you initialize Picobel in your JS. | ||
| Picobel comes with many pre-made themes. To use a theme, make sure you've downloaded the correct stylesheet from the [Picobel CSS library](https://github.com/tomhazledine/picobel/tree/master/css) and then reference the chosen theme name as an option when you initialize Picobel in your JS. | ||
| <!-- Initialise Picobel with a theme--> | ||
| <script> | ||
| Picobel( { themename: "chosenThemeName" } ); | ||
| Picobel( { theme: "chosenThemeName" } ); | ||
| </script> | ||
| So if you wanted to use the "iTunes" theme, your Picobel call would look like this: `Picobel({themename:"itunes"});`. If you don't explicitly choose a theme, then the Default theme will be used. The current options are: `skeleton`, `itunes`, `bbc`, `soundcloud`, `pitchfork`, & `eatenbymonsters`. | ||
| So if you wanted to use the "iTunes" theme, your Picobel call would look like this: `Picobel({theme:"itunes"});`. If you don't explicitly choose a theme, then the Default theme will be used. The current options are: `skeleton`, `itunes`, `bbc`, `soundcloud`, `pitchfork`, & `eatenbymonsters`. | ||
@@ -157,0 +157,0 @@ You can see them all in action in the [Picobel.js CodePen Collection](http://codepen.io/collection/XpZEor/), and see screenshots of each featured theme on this page: |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Number of package files
- increased by26.09%
58
- Lines of code
- increased by0.83%
6672
Worsened metrics
- Total package byte prevSize
- decreased by-2.04%
978877
- Dev dependency count
- increased by83.33%
11
No dependency changes