mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-21 09:09:01 +00:00
First attempt at embeddable winamp2-js
This commit is contained in:
Jordan Eldredge
parent
e3671e8249
commit
06b3412e4f
8 changed files with 249 additions and 0 deletions
8
embed.html
Normal file
8
embed.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<html>
|
||||
<body>
|
||||
<script src='embed.min.js'
|
||||
data-media="https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3"
|
||||
data-filename= "1. DJ Mike Llama - Llama Whippin' Intro"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
1
embed/.gitignore
vendored
Normal file
1
embed/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
58
embed/Gruntfile.js
Normal file
58
embed/Gruntfile.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
module.exports = function(grunt) {
|
||||
|
||||
// 1. All configuration goes here
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
concat: {
|
||||
js: {
|
||||
// the files to concatenate
|
||||
src: [
|
||||
'../js/jszip.2.4.0.min.js',
|
||||
'../js/browser.js',
|
||||
'../js/file.js',
|
||||
'../js/visualizer.js',
|
||||
'../js/media.js',
|
||||
'../js/font.js',
|
||||
'../js/skin-sprites.js',
|
||||
'../js/skin.js',
|
||||
'../js/multi-display.js',
|
||||
'../js/hotkeys.js',
|
||||
'../js/context.js',
|
||||
'../js/window-manager.js',
|
||||
'../js/main-window.js',
|
||||
'../js/winamp.js',
|
||||
'../js/embed.js'
|
||||
],
|
||||
// the location of the resulting JS file
|
||||
dest: '../embed.js'
|
||||
},
|
||||
css: {
|
||||
// the files to concatenate
|
||||
src: [
|
||||
'../css/winamp.css',
|
||||
'../css/main.css',
|
||||
'../css/context-menu.css'
|
||||
],
|
||||
// the location of the resulting JS file
|
||||
dest: '../embed.css'
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
// the banner is inserted at the top of the output
|
||||
banner: '/* http://jordaneldredge.com/projects/winamp2-js/ */\n'
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'../embed.min.js': ['../embed.js']
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
|
||||
grunt.registerTask('default', ['concat', 'uglify']);
|
||||
|
||||
};
|
||||
20
embed/README.md
Normal file
20
embed/README.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
## TLDR;
|
||||
|
||||
You can ignore everything in this directory.
|
||||
|
||||
# Production
|
||||
|
||||
In production (http://jordaneldredge.com/projects/winamp.js/), I host a version
|
||||
of the project that minifies and inlines many of the assets in improve load
|
||||
time, and reduce load on my server. These files are used to build that version
|
||||
production version of `index.html`.
|
||||
|
||||
If you have [Grunt](http://gruntjs.com) installed, you should be able to
|
||||
generate the production build using these steps:
|
||||
|
||||
cd production/
|
||||
npm install
|
||||
grunt
|
||||
|
||||
|
||||
|
||||
9
embed/analytics.js
Normal file
9
embed/analytics.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-96948-15', 'jordaneldredge.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
9
embed/package.json
Normal file
9
embed/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"name": "Winamp2-js",
|
||||
"version": "0.1.0",
|
||||
"devDependencies": {
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-contrib-concat": "^0.5.1",
|
||||
"grunt-contrib-uglify": "^0.8.0"
|
||||
}
|
||||
}
|
||||
85
html/template.html
Normal file
85
html/template.html
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<div id='main-window' class='loading stop'>
|
||||
<div id='loading'>Loading...</div>
|
||||
<div id='title-bar' class='selected'>
|
||||
<div id='option'>
|
||||
<ul id='context-menu'>
|
||||
<li><a href='https://github.com/captbaritone/winamp2-js' target='_blank'>Winamp2-js...</a></li>
|
||||
<li class='hr'><hr /></li>
|
||||
<li id='context-play-file'>Play File...</li>
|
||||
<li class='parent'>
|
||||
<ul>
|
||||
<li id='context-load-skin'>Load Skin...</li>
|
||||
<li class='hr'><hr /></li>
|
||||
<li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz'><Base Skin></li>
|
||||
<li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/MacOSXAqua1-5.wsz'>Mac OSX v1.5 (Aqua)</li>
|
||||
<li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/TopazAmp1-2.wsz'>TopazAmp</li>
|
||||
<li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/Vizor1-01.wsz'>Vizor</li>
|
||||
<li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/XMMS-Turquoise.wsz'>XMMS Turquoise </li>
|
||||
<li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/ZaxonRemake1-0.wsz'>Zaxon Remake</li>
|
||||
</ul>
|
||||
Skins
|
||||
</li>
|
||||
<li class='hr'><hr /></li>
|
||||
<li id='context-exit'>Exit</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='shade-time'>
|
||||
<div id='shade-minus-sign'></div>
|
||||
<div id='shade-minute-first-digit' class='character'></div>
|
||||
<div id='shade-minute-second-digit' class='character'></div>
|
||||
<div id='shade-second-first-digit' class='character'></div>
|
||||
<div id='shade-second-second-digit' class='character'></div>
|
||||
</div>
|
||||
<div id='minimize'></div>
|
||||
<div id='shade'></div>
|
||||
<div id='close'></div>
|
||||
</div>
|
||||
<div class='status'>
|
||||
<div id='clutter-bar'>
|
||||
<div id='button-o'></div>
|
||||
<div id='button-a'></div>
|
||||
<div id='button-i'></div>
|
||||
<div id='button-d'></div>
|
||||
<div id='button-v'></div>
|
||||
</div>
|
||||
<div id='play-pause'></div>
|
||||
<div id='work-indicator'></div>
|
||||
<div id='time'>
|
||||
<div id='minus-sign'></div>
|
||||
<div id='minute-first-digit'></div>
|
||||
<div id='minute-second-digit'></div>
|
||||
<div id='second-first-digit'></div>
|
||||
<div id='second-second-digit'></div>
|
||||
</div>
|
||||
<canvas id='visualizer' width='152' height='32'></canvas>
|
||||
</div>
|
||||
<div class='media-info'>
|
||||
<div id='song-title' class='text'></div>
|
||||
<div id='kbps'></div>
|
||||
<div id='khz'></div>
|
||||
<div class='mono-stereo'>
|
||||
<div id='mono'></div>
|
||||
<div id='stereo'></div>
|
||||
</div>
|
||||
</div>
|
||||
<input id='volume' type='range' min='0' max='100' step='1' value='50' />
|
||||
<input id='balance' type='range' min='-100' max='100' step='2' value='0' />
|
||||
<div class='windows'>
|
||||
<div id='equalizer-button'></div>
|
||||
<div id='playlist-button'></div>
|
||||
</div>
|
||||
<input id='position' type='range' min='0' max='100' step='1' value='0' />
|
||||
<div class='actions'>
|
||||
<div id='previous'></div>
|
||||
<div id='play'></div>
|
||||
<div id='pause'></div>
|
||||
<div id='stop'></div>
|
||||
<div id='next'></div>
|
||||
</div>
|
||||
<div id='eject'></div>
|
||||
<div class='shuffle-repeat'>
|
||||
<div id="shuffle"></div>
|
||||
<div id="repeat"></div>
|
||||
</div>
|
||||
<a id='about' target='_blank' href='https://github.com/captbaritone/winamp2-js'></a>
|
||||
</div>
|
||||
59
js/embed.js
Normal file
59
js/embed.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
var scriptTag = document.currentScript;
|
||||
|
||||
var loadCss = function(url) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url);
|
||||
xhr.onload = function(e) {
|
||||
if (this.status == 200) {
|
||||
var style = document.createElement("style");
|
||||
|
||||
style.appendChild(document.createTextNode(this.response));
|
||||
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
loadCss('embed.css');
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'html/template.html');
|
||||
xhr.onload = function(e) {
|
||||
if (this.status == 200) {
|
||||
initFromTemplate(this.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
|
||||
var initFromTemplate = function (template) {
|
||||
var node = document.createElement('div');
|
||||
node.style.position = "relative";
|
||||
node.innerHTML = template;
|
||||
|
||||
if (scriptTag.nextSibling) {
|
||||
scriptTag.parentNode.insertBefore(node, scriptTag.nextSibling);
|
||||
}
|
||||
else {
|
||||
scriptTag.parentNode.appendChild(node);
|
||||
}
|
||||
if(Browser.isCompatible()) {
|
||||
winamp = Winamp.init({
|
||||
'volume': 50,
|
||||
'balance': 0,
|
||||
'mediaFile': {
|
||||
'url': scriptTag.dataset.media,
|
||||
'name': scriptTag.dataset.trackname
|
||||
},
|
||||
'skinUrl': 'https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz'
|
||||
});
|
||||
|
||||
Hotkeys.init(winamp);
|
||||
Context.init(winamp);
|
||||
} else {
|
||||
document.getElementById('winamp').style.display = 'none';
|
||||
document.getElementById('browser-compatibility').style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue