View Single Post
Old 19th August 2020, 06:01   #1
EatMe
Junior Member
 
Join Date: Aug 2020
Posts: 6
MilkDrop easy to implement on webpages with EatMe/JBerg/Butterchurn 2.6.7.1e-complete

Presenting!!!

http://https://github.com/free-music....7.1e-complete
license: https://github.com/free-music-by-eat...master/LICENSE

butterchurn_example_with_fullscreen_func.zip

The music page on my website contains MilkDrop visuals from the EatMe/JBerg/Butterchurn v2.6.7.1e-complete (GitHub).
The original project is Butterchurnviz by JBerg and contains an update in the v.2.6.7.1e-complete with a manual and new functions.
You can right-click or push long on mobiles on the visuals for a full view experience.
Left click or tap shortly on the visuals to change the current visual presets.
EatMe/JBerg/Butterchurn v2.6.7.1e-complete (GitHub) is released under a MIT license for Commercial, Private, Distribution and Modification usage,
with No Liability Granted and No Warranty Granted under the conditions of a License and Copyright notice.

Butterchurn-v2.6.7.1e complete - with HTML_butterchurn_example_e.htm
@free-music-by-eatme free-music-by-eatme released this 2 hours ago

…easy to implement manual

see https://butterchurnviz.com/ for the original project.
see nightride.fm for an interlaced version with radiostream.
see eatme.pro/music for a right-click fullscreen with music.

play audio link, html audio element and directly showing butterchurn MilkDrop visuals are in the HTML_butterchurn_example_e.htm
butterchurn.js example

?audiotoplay=(audio file or stream URL)
in the example document parameters will load an audio file or stream. the user must press play.

in this example attached:
right click / push longer than 500 msec on mobile
fullscreen/restore

left click / tap shorter than 500 msec on mobile
change preset

needed: ((x) indicates changes were made)

(x) streaming or file source with HTTP Headers set to "Access-Control-Allow-Origin: *" (being a star, shift-8)
on the webserver to contain a HTTP Header that allows you to use the mp3 on (x) all (or your) pages.

(x) butterchurn.js

set the location in the script src header below
eatme.pro/filedmin/scripts/butterchurn.js as of now contains my editing version, see attached for this working
edit butterchurn.js var section at begin of file to set screen size, if not in stylesheet, z-index (layout order)
default: 100x100 "98" "1" fullscreen=false
butterchurn.min.js - see attached

set the location in the script src header below
butterchurnExtraImages.min.js - see attached

set the location in the script src header below
butterchurnPresets.min.js - see attached

set the location in the script src header below
butterchurnPresetsExtra.min.js - see attached

set the location in the script src header below
butterchurnPresetsExtra2.min.js - see attached

set the location in the script src header below
butterchurn_initvar.js - used to be called helper.js - see attached

set the location in the script src header below
jquery 1.12.14.min.js works - ajax.googleapis has a slow response but can be multi-site cached

set the location in the script src header below
not required: butterchurn_isSupported.js - old code that is in included below in this example to check if it is supported.. https://ajax.googleapis.com/ajax/lib.../jquery.min.js - loaded below

https://ajax.googleapis.com/ajax/lib.../jquery.min.js is the newest referred by w3schools, not tested
//required: jquery 1 12 14 or something min.js here from google with a slow response time

EatMe/JBerg/Butterchurn v2.6.7.1e-complete (GitHub) is released under a MIT license for Commercial, Private, Distribution and Modification usage, with No Liability Granted and No Warranty Granted under the conditions of a License and Copyright notice.
https://github.com/free-music-by-eat...master/LICENSE

Download example - easy to implement MilkDrop on your own website - and code files:
[url]http://https://github.com/free-music....7.1e-complete

special shout outs to:
Ryan Geiss for creating MilkDrop
Nullsoft for creating Winamp
All the amazing preset creators, special thanks to Flexi

EatMe/JBerg/Butterchurn v2.6.7.1e-complete update and example html on GitHub
by EatMe - http://eatme.pro/about - free music and science

Radio http://nightride.fm where I found the first interlaced implementation

Original http://butterchurnviz.com javascript port on GitHub by Jonathan Berg - http://jonathanberg.nl/
EatMe is offline   Reply With Quote