js byte数组_小白的js——html音乐播放器（1）

昨天把Head First HTML and CSS 看完了，还是很有成就感的，之前没有自己写过代码，在学习编程这件事情上，从入门到放弃，终日徘徊，这次能够一天看完700多页的编程教材也是一个小小的进步了。话说回来，上次在用js写播放器时，只是仅仅实现了功能，这次有了html和css的基础知识，准备重新写一遍，把知识用起来。

这次上次js写的功能，蓝条是播放进度，可以点击，和正常的音乐播放器功能一样，红条是音量控制条，支持倍速播放（就是一个函数），滑动调节播放速度，step是0.1，max是5

重新写主要考虑布局与美观，毕竟功能已经实现了，我封装好的函数，拿过来就可以直接用，下面的图片是上一次的代码截图：

打开主流的音乐网站，很容易发现，每个歌曲，都有歌手，专辑，封面图片等这些信息，遇到的第一个问题就是，这些数据是从哪里来的呢，毕竟我是做一个本地播放器，不难发现流行的mp3格式本身就包含这些信息，我们把音乐下载后，总是能在本地看到封面，专辑，歌手等信息，那么问题又来了，这么把这些信息提取出来呢？换句话说，js如何提取这些信息呢？搜索了一圈，发现原来这些信息，叫ID3信息，还包含不同的ID3版本，我暂时不考虑那么多，又找到了GitHub上的开源项目——JS MediaTags

Great！毕竟有前辈做好的功能，我拿过来用就可以了，看上去是这样。我先试试吧。

// From File

这是网站上给出的用法案例，拿过来跑一下，发现报错。错误类型是语法错误，...（点点点）这个地方不对，教程中说过这个语法，有点忘了，没关系，搜一下，看MND文档上对这个语法的描述，越看越觉得不对劲。病急乱投医。先用Node.js跑一下，也是失败，这里要喷一下Apple，太坑人了，放在桌面的音乐文件，死活路径不对，检查了半天，发现是iCloud作怪，关了iCloud试一下，果然成功了。（iCloud坑了我好几个小时……）

// Simple API - will fetch all tags
var jsmediatags = require("jsmediatags");

jsmediatags.read("./music-file.mp3", {
  onSuccess: function(tag) {
    console.log(tag);
  },
  onError: function(error) {
    console.log(':(', error.type, error.info);
  }
});

这是Node.js的用法案例，我还是不明白哪里出了问题……傻人有傻福，经过几个小时的不断测试，终于灵光一现——...这里是不是省略了Node.js中的文件后面的那一串，试一试，成功了。

终于在网页上拿到了，歌曲的id3信息，数据长这个样子：

我最想拿到的就是封面图片，不难发现，picture里面的数据就是图片。虽然英语不好，不过这个单词还好认识……不过这个picture的数据data是一个array啊，怎么把array转成图片呢？

搜一下，发现原来这是byte数组，可以转成base64图片。正好找到了一位前辈写好的代码，直接复制过来用一下吧

Great！成功拿到图片了。

啊，这一刻还是很激动的，毕竟花了我8个小时多的时间。ok，音乐播放器的第二步已经做好了，接下来就是真正写HTML和CSS的时间了。

tips：这一系列的文章只是为了纪念我写代码的过程，有朋友一遍对我说光看书没用要写代码，一边说我建议你先把基础全学一遍再来写代码……还好我比较固执，对这种意见左耳朵进，左耳朵出。总之我拿到歌曲信息了。该吃米氮平，洗澡睡觉了，各位晚安。假设真有同学看了这篇文章，如果有什么问题的话，可以问我，虽然我不一定会，应该说大部分编程问题都不会，我还是很乐意去试试看的。