4 ms·

Author here. I wrote a Twitter thread demonstrating many of its features. You can find it here: https://mobile.twitter.com/captbaritone/status/96127471401331916

Author here. I wrote a Twitter thread demonstrating many of its features. You can find it here: https://mobile.twitter.com/captbaritone/status/961274714013319168 https://mobile.twitter.com/captbaritone/status/9612747140133...

strictnein 9y ago
Nice! Was trying to find that video of the live drag and drop updating of the skin that I saw on Twitter last night. That's super slick.
vvanders 9y ago
Damn! Right in the nostalgia. Now you just need shoutcast support ;).
captbaritone 9y ago
People in this thread might also enjoy this Twitter bot I wrote that tweets Winamp skins: https://twitter.com/winampskins https://twitter.com/winampskins
- _sdegutis 9y ago
  Super cool. Where are you finding the skins? I went looking for some skins I made and put up on deviantart, but the download links are all broken. Do you just scrape the web or are they your personal collection, or are you querying a specific site?
  - captbaritone 9y ago
    I found a massive zip file of ~3K skins somewhere. I’m selecting skins from that set.
krisives 9y ago
Does it support m3u or playlists over HTTP?
- captbaritone 9y ago
  It theoretically could, but the endpoint would need to serve the assets with permissive CORs headers.
  - krisives 9y ago
    That makes sense, I forgot about the pesky CORS situation. My thinking was maybe the <audio> or other subsystem that is capable of loading MP3s remotely (since they are media objects) could do the same for playlist data. Cheers!
    - captbaritone 9y ago
      Yeah, CORs is a wrench in the works for this stuff. Even our audio source is subject to CORs because we want to be able to do EQ and visualization.
JepZ 9y ago
Pretty cool stuff :D Any plans to make this a PWA (by adding a serviceworker)? Would be awesome to be able to run this offline and in a dedicated window.
CMay 9y ago
This is great and brings back a lot of old memories. Something that would help this spread (perhaps if it was hosted somewhere dedicated to it), is allowing a URL of an MP3 or a list of other audio files to be included in the link so people can share a song "the way it was meant to be played." Thanks for your hard work and for making sure it wasn't broken in Edge. It was really satisfying to pull it up on my Windows 10 Mobile without issue.
- captbaritone 9y ago
  Alas, this is more complicated than just including a link. The mp3 needs to be served with permissive "CORs" headers, and most are not. I made the call, that it would be too confusing for users to try to support loading from URL.
  - CMay 9y ago
    Yeah, that makes sense. You would have to download the remote resource in the link and re-host it which can get expensive quickly. There are probably a few scenarios where DNS tricks would save the day, but not reliably.
- captbaritone 9y ago
  Regarding Edge, all credit goes to the work the Edge team has put into the browser. I just made sure I was building to spec, and it seemed to work!
shurcooL 9y ago
Does it decode the audio files (mp3, etc.) into the low level PCM audio samples and play those back? Or does it use a higher level browser API that lets you play high level mp3 files directly? If the latter, how can you still implement the equalizer?
- woogley 9y ago
  Web Audio supports it: https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilte... See how it's used here: https://github.com/captbaritone/winamp2-js/blob/master/js/media/index.js https://github.com/captbaritone/winamp2-js/blob/master/js/me...
sundarurfriend 9y ago
For those who don't want to navigate Twitter for whatever reason (tracking, slows down your browser, bad UI, etc.), here's the content from the thread (the images and videos are still Twitter-hosted, by the way): ----------------------------------- It's done! Winamp2-js (https://jordaneldredge.com/projects/winamp2-js/ https://jordaneldredge.com/projects/winamp2-js/) finally supports all three windows! To celebrate, here's a list of some of the cool things it can do: (thread) https://pbs.twimg.com/media/DVcfDHBVQAAp3Tm?format=png https://pbs.twimg.com/media/DVcfDHBVQAAp3Tm?format=png * Load any classic Winamp skin just by dragging it onto the main window. (Shoutout to @stuk for JSZip which lets us decompress .wsz files in the browser. (link: https://stuk.github.io/jszip/ https://stuk.github.io/jszip/) https://video.twimg.com/ext_tw_video/961271636983820288/pu/vid/990x720/DMmXxEB7fOBIT5_a.mp4 https://video.twimg.com/ext_tw_video/961271636983820288/pu/v... * Drag local audio files into the playlist to queue them up. https://video.twimg.com/ext_tw_video/961271712238063621/pu/vid/994x720/BEONYMr9RpsOJT_d.mp4 https://video.twimg.com/ext_tw_video/961271712238063621/pu/v... * Visualize your music with the bar or line visualizer. https://video.twimg.com/ext_tw_video/961271795725709314/pu/vid/534x360/q5iSFe-_jTYaoxz-.mp4 https://video.twimg.com/ext_tw_video/961271795725709314/pu/v... * Adjust the fully functional EQ to pump up the bass. (Shoutout to @epistemex for cardinal-spline-js (link: https://github.com/epistemex/cardinal-spline-js) https://github.com/epistemex/cardinal-spline-js)) https://video.twimg.com/ext_tw_video/961271880035389441/pu/vid/630x640/V7qFCwUdrOJXhav8.mp4 https://video.twimg.com/ext_tw_video/961271880035389441/pu/v... * Import/export Winamp's own binary EQ settings files. https://video.twimg.com/ext_tw_video/961272045177782275/pu/vid/1698x720/QmMODw5KCUMjPlWp.mp4 https://video.twimg.com/ext_tw_video/961272045177782275/pu/v... * Export your playlist as an .html file. https://video.twimg.com/ext_tw_video/961272121270743040/pu/vid/914x720/oqNVw-Ger9abSzEG.mp4 https://video.twimg.com/ext_tw_video/961272121270743040/pu/v... * Save screen real estate with each window's "shade" mode. https://pbs.twimg.com/media/DVcf90bVQAALtl_?format=jpg https://pbs.twimg.com/media/DVcf90bVQAALtl_?format=jpg * See each file's title/artist as specified in its ID3 tags. (Shoutout to @aadsm for jsmediatags (link: https://github.com/aadsm/jsmediatags) https://github.com/aadsm/jsmediatags)) https://video.twimg.com/ext_tw_video/961272266322407425/pu/vid/994x720/O7G2_I-YymmJc6qW.mp4 https://video.twimg.com/ext_tw_video/961272266322407425/pu/v... * If a skin specifies some transparent regions in its region.txt, they are respected. (Shoutout to @SaraSoueidan for (link: https://www.sarasoueidan.com/blog/css-svg-clipping/) https://www.sarasoueidan.com/blog/css-svg-clipping/)) https://video.twimg.com/ext_tw_video/961272327584403457/pu/vid/736x720/fJndz3W6TasvoFcL.mp4 https://video.twimg.com/ext_tw_video/961272327584403457/pu/v... * Drag windows around, and easily align them with window snapping. https://video.twimg.com/ext_tw_video/961272384148815873/pu/vid/846x720/EiIvaRZZYhvzpO_i.mp4 https://video.twimg.com/ext_tw_video/961272384148815873/pu/v... * Use hotkeys to control all major functions. https://video.twimg.com/ext_tw_video/961272440251822080/pu/vid/634x640/kLUsDjS82xnrcItQ.mp4 https://video.twimg.com/ext_tw_video/961272440251822080/pu/v... * Select/drag tracks to reorder them. https://video.twimg.com/ext_tw_video/961272499219587072/pu/vid/1090x720/m5txv-ScyC93GtH6.mp4 https://video.twimg.com/ext_tw_video/961272499219587072/pu/v... * "Double" mode (ctrl+d) makes the main and EQ windows twice as big. https://pbs.twimg.com/media/DVcgTW3VMAAgrdc?format=jpg https://pbs.twimg.com/media/DVcgTW3VMAAgrdc?format=jpg Getting all of this to work entirely in the browser has been a great challenge, and I've learned a lot. Thanks to @The_DoctorO for being an invaluable source of insider information. Thanks to @LuigiHann for catching many small places where I hand't perfectly recreated Winamp's handling of skins. Thanks to @ja2ke for the original retweet which I believe kicked this whole thing off more than three years ago. And of course, thanks to @JustinFrankel. ‍️ ----------------------------------- (@captbaritone, I'm assuming you're ok with pasting the content here, but please let me know in case you have objections.)

strictnein 9y ago

Nice! Was trying to find that video of the live drag and drop updating of the skin that I saw on Twitter last night. That's super slick.

vvanders 9y ago

Damn! Right in the nostalgia. Now you just need shoutcast support ;).

captbaritone 9y ago

People in this thread might also enjoy this Twitter bot I wrote that tweets Winamp skins: https://twitter.com/winampskins https://twitter.com/winampskins

_sdegutis 9y ago
Super cool. Where are you finding the skins? I went looking for some skins I made and put up on deviantart, but the download links are all broken. Do you just scrape the web or are they your personal collection, or are you querying a specific site?
- captbaritone 9y ago
  I found a massive zip file of ~3K skins somewhere. I’m selecting skins from that set.

krisives 9y ago

Does it support m3u or playlists over HTTP?

captbaritone 9y ago
It theoretically could, but the endpoint would need to serve the assets with permissive CORs headers.
- krisives 9y ago
  That makes sense, I forgot about the pesky CORS situation. My thinking was maybe the <audio> or other subsystem that is capable of loading MP3s remotely (since they are media objects) could do the same for playlist data. Cheers!
  - captbaritone 9y ago
    Yeah, CORs is a wrench in the works for this stuff. Even our audio source is subject to CORs because we want to be able to do EQ and visualization.

JepZ 9y ago

Pretty cool stuff :D Any plans to make this a PWA (by adding a serviceworker)? Would be awesome to be able to run this offline and in a dedicated window.

CMay 9y ago

This is great and brings back a lot of old memories. Something that would help this spread (perhaps if it was hosted somewhere dedicated to it), is allowing a URL of an MP3 or a list of other audio files to be included in the link so people can share a song "the way it was meant to be played." Thanks for your hard work and for making sure it wasn't broken in Edge. It was really satisfying to pull it up on my Windows 10 Mobile without issue.

captbaritone 9y ago
Alas, this is more complicated than just including a link. The mp3 needs to be served with permissive "CORs" headers, and most are not. I made the call, that it would be too confusing for users to try to support loading from URL.
- CMay 9y ago
  Yeah, that makes sense. You would have to download the remote resource in the link and re-host it which can get expensive quickly. There are probably a few scenarios where DNS tricks would save the day, but not reliably.
captbaritone 9y ago
Regarding Edge, all credit goes to the work the Edge team has put into the browser. I just made sure I was building to spec, and it seemed to work!

shurcooL 9y ago

Does it decode the audio files (mp3, etc.) into the low level PCM audio samples and play those back? Or does it use a higher level browser API that lets you play high level mp3 files directly? If the latter, how can you still implement the equalizer?

woogley 9y ago
Web Audio supports it: https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilte... See how it's used here: https://github.com/captbaritone/winamp2-js/blob/master/js/media/index.js https://github.com/captbaritone/winamp2-js/blob/master/js/me...

sundarurfriend 9y ago

For those who don't want to navigate Twitter for whatever reason (tracking, slows down your browser, bad UI, etc.), here's the content from the thread (the images and videos are still Twitter-hosted, by the way): ----------------------------------- It's done! Winamp2-js (https://jordaneldredge.com/projects/winamp2-js/ https://jordaneldredge.com/projects/winamp2-js/) finally supports all three windows! To celebrate, here's a list of some of the cool things it can do: (thread) https://pbs.twimg.com/media/DVcfDHBVQAAp3Tm?format=png https://pbs.twimg.com/media/DVcfDHBVQAAp3Tm?format=png * Load any classic Winamp skin just by dragging it onto the main window. (Shoutout to @stuk for JSZip which lets us decompress .wsz files in the browser. (link: https://stuk.github.io/jszip/ https://stuk.github.io/jszip/) https://video.twimg.com/ext_tw_video/961271636983820288/pu/vid/990x720/DMmXxEB7fOBIT5_a.mp4 https://video.twimg.com/ext_tw_video/961271636983820288/pu/v... * Drag local audio files into the playlist to queue them up. https://video.twimg.com/ext_tw_video/961271712238063621/pu/vid/994x720/BEONYMr9RpsOJT_d.mp4 https://video.twimg.com/ext_tw_video/961271712238063621/pu/v... * Visualize your music with the bar or line visualizer. https://video.twimg.com/ext_tw_video/961271795725709314/pu/vid/534x360/q5iSFe-_jTYaoxz-.mp4 https://video.twimg.com/ext_tw_video/961271795725709314/pu/v... * Adjust the fully functional EQ to pump up the bass. (Shoutout to @epistemex for cardinal-spline-js (link: https://github.com/epistemex/cardinal-spline-js) https://github.com/epistemex/cardinal-spline-js)) https://video.twimg.com/ext_tw_video/961271880035389441/pu/vid/630x640/V7qFCwUdrOJXhav8.mp4 https://video.twimg.com/ext_tw_video/961271880035389441/pu/v... * Import/export Winamp's own binary EQ settings files. https://video.twimg.com/ext_tw_video/961272045177782275/pu/vid/1698x720/QmMODw5KCUMjPlWp.mp4 https://video.twimg.com/ext_tw_video/961272045177782275/pu/v... * Export your playlist as an .html file. https://video.twimg.com/ext_tw_video/961272121270743040/pu/vid/914x720/oqNVw-Ger9abSzEG.mp4 https://video.twimg.com/ext_tw_video/961272121270743040/pu/v... * Save screen real estate with each window's "shade" mode. https://pbs.twimg.com/media/DVcf90bVQAALtl_?format=jpg https://pbs.twimg.com/media/DVcf90bVQAALtl_?format=jpg * See each file's title/artist as specified in its ID3 tags. (Shoutout to @aadsm for jsmediatags (link: https://github.com/aadsm/jsmediatags) https://github.com/aadsm/jsmediatags)) https://video.twimg.com/ext_tw_video/961272266322407425/pu/vid/994x720/O7G2_I-YymmJc6qW.mp4 https://video.twimg.com/ext_tw_video/961272266322407425/pu/v... * If a skin specifies some transparent regions in its region.txt, they are respected. (Shoutout to @SaraSoueidan for (link: https://www.sarasoueidan.com/blog/css-svg-clipping/) https://www.sarasoueidan.com/blog/css-svg-clipping/)) https://video.twimg.com/ext_tw_video/961272327584403457/pu/vid/736x720/fJndz3W6TasvoFcL.mp4 https://video.twimg.com/ext_tw_video/961272327584403457/pu/v... * Drag windows around, and easily align them with window snapping. https://video.twimg.com/ext_tw_video/961272384148815873/pu/vid/846x720/EiIvaRZZYhvzpO_i.mp4 https://video.twimg.com/ext_tw_video/961272384148815873/pu/v... * Use hotkeys to control all major functions. https://video.twimg.com/ext_tw_video/961272440251822080/pu/vid/634x640/kLUsDjS82xnrcItQ.mp4 https://video.twimg.com/ext_tw_video/961272440251822080/pu/v... * Select/drag tracks to reorder them. https://video.twimg.com/ext_tw_video/961272499219587072/pu/vid/1090x720/m5txv-ScyC93GtH6.mp4 https://video.twimg.com/ext_tw_video/961272499219587072/pu/v... * "Double" mode (ctrl+d) makes the main and EQ windows twice as big. https://pbs.twimg.com/media/DVcgTW3VMAAgrdc?format=jpg https://pbs.twimg.com/media/DVcgTW3VMAAgrdc?format=jpg Getting all of this to work entirely in the browser has been a great challenge, and I've learned a lot. Thanks to @The_DoctorO for being an invaluable source of insider information. Thanks to @LuigiHann for catching many small places where I hand't perfectly recreated Winamp's handling of skins. Thanks to @ja2ke for the original retweet which I believe kicked this whole thing off more than three years ago. And of course, thanks to @JustinFrankel. ‍️ ----------------------------------- (@captbaritone, I'm assuming you're ok with pasting the content here, but please let me know in case you have objections.)