查看原文
其他

一代传奇!经典播放器 Winamp 的开源实现

The following article is from 开源前哨 Author 小秋

【导语】: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/captbaritone/webamp

下载安装

  • 使用 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;

// 检查当前环境中是否支持Winamp
if(!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 在国内慢慢丢失市场了。


- EOF -

推荐阅读  点击标题可跳转

1、3400 Star!知名日程安排工具的开源替代品

2、这个特殊的开源“操作系统”,霸榜 GitHub 两天了!

3、fscan:一键自动化、全方位漏洞扫描的开源工具


关注「程序员的那些事」加星标,不错过圈内事

点赞和在看就是最大的支持❤️

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存