【导语】:Winamp 是一个超级经典的音频播放器,诞生于 1997 年。它随着 MP3 共享文件的凋敝而迅速走红,现在曾经有名无实了。

用过 Winamp 这个软件的人中,80 后应该居多。

Winamp 有很多插件,比方:Winamp 2. 的“歌词伴侣”就十分实用。

明天举荐的开源我的项目就是 Winamp 2.9 的开源实现。

简介

Webamp 应用了HTML5 和 JavaScript 对 Winamp 2.9 进行了从新实现,Webamp 能够运行在古代浏览器上,包含 Edge、Firefox、Safari 和 Chrome,不反对 IE。

我的项目地址是:https://github.com/captbarito...

下载安装

  • 应用 npm 装置:
npm install --save webamp
  • 间接引入:
<script src="https://unpkg.com/webamp@1.4.0/built/webamp.bundle.min.js"></script>
  • 将 Webamp 增加到本人的网页中最简略的办法:
<div id="app"></div><script src="https://unpkg.com/webamp"></script><script>new Webamp().renderWhenReady(app);</script>

用法

  • 创立容器。在HTML中创立一个DOM元素,Webamp将应用它来查找其初始地位:
<div id="winamp-container"></div>
  • 初始化Webamp示例:
import Webamp from 'webamp';// 如果通过tag标签引入,则Winamp可在全局`window`对象上应用:// const Winamp = window.Webamp;// 查看以后环境中是否反对Winampif(!Webamp.browserIsSupported()) {    alert("Oh no! Webamp does not work!")    throw new Error("What's the point of anything?")}// 所有配置都是可选的const webamp = new Webamp({  initialTracks: [{    metaData: {      artist: "DJ Mike Llama",      title: "Llama Whippin' Intro",    },    url: "path/to/mp3/llama-2.91.mp3"  }],  initialSkin: {    url: "path/to/skins/TopazAmp1-2.wsz"  },});webamp.renderWhenReady(document.getElementById('winamp-container'));
  • webamp的api包含很多函数办法,静态方法、构造方法、实例办法等,具体参考官网的api文档。

后话 

我看到有微博网友是这样调侃这个开源我的项目的:

\@Funarp: 草,当年最费内存的播放器当初用最费内存的语言在最费内存的浏览器外面重制了

略微解释一下,2002年8月公布了 Winamp 3,不过其系统资源占用率高的一批。

当年就被很多用户吐槽,好在 Winamp 立马反馈过去,分了两条产品线来开发:保留经典的 Winamp 2,同时持续改良 Winamp 3。 

为什么说 Winamp 经典?它还启发了其余后继播放器,比方:foobar 和千千静听。

随着盗版操作系统内置千千静听,Winamp 在国内缓缓失落市场了。

开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10万+ Star 的开源技术资源库,包含:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。