引言

自己很喜欢音乐常用 Apple Music 或者播放器听歌于是分享自己很喜欢的歌成了一种需求。带壳截图已经不是什么新鲜事将设备与截图结合分享的确可以很直观好看的分享给朋友。然而有没有一种更有情怀的方式呢我想大家对音乐的热爱很多都来自与最早的 Walkman 系列吧。苦于目前的非智能系统的 Walkman 没有办法及时的分享截图也基于情怀的角度万一你用 iPhone 听着歌想着分享一些有逼格的截图呢哈哈于是我苦思苦想——

然后想到用 Workflow获取正在听的歌然后将数据即时的生成一张截图分享如何呢

于是折腾了一下午加上今天的功能完善做出了这样一个能够满足我现有所有向往的 Workflow。 先不说了默念一声

索尼大法好

概括一下这个 Workflow有什么用

1. 用手机听歌希望有情怀有信仰的分享歌曲。
2. 用 Walkman 听歌希望以它本来的模样方便的分享。

然后开始吧。

效果预览

本地无封面的在线搜索封面生成设备截图

网易云音乐版效果展示（手动分享复制链接后点击 workflow 即可）

功能及下载

1. 自动获取音乐原生 musicworkflow 暂时不支持获取其他第三方 app 信息。
2. 对于没有专辑封面的本地歌曲自动进行在线 iTunes store 的搜索选择。
   
3. 对于在线本地都没有结果的默认展示 Walkman 初始封面。
4. 目前支持 WM1A,WM1Z,A35红色，绿色，黑色
5. 由于分辨率问题目前暂时只支持6，6p，6s，6sp，7，7sp。
6. 支持最后合成完毕后自动叠加屏幕眩光。
7. 最后合成完毕后自动将歌曲信息以『XXX BY XXX』 的格式复制到剪贴板方便后续分享workflow 不支持微博一键分享所以可手动分享。

备注从通知中心插件作为入口有一定几率崩溃多尝试几次应该就可以了

1. 自带原生音乐 app 版下载链接    Walkman Maker fixed
2. 网易云音乐版  Walkman Maker网易云音乐版，手动分享复制链接后点击 workflow 即可（这里参考@特殊字符Alan的用 Workflow 从网易云音乐迁移数据至 Apple Music 或 Spotify里面讲到的 json 获取的办法来获取网易单曲的信息来进行合成，感谢）
3. 应微博上朋友的需求，做了一个手动输入信息查找歌曲并生成的 workflow...也放上来，希望能帮到一些朋友   Walkman Maker Manual

附送  一个自动识别是手机还是手表的截图并自动生成带壳截图的 workflow 自动识别设备截图

实现原理

实现这个 Workflow 的原理主要基于 HTML 加 CSS 对于封面上歌曲信息文字的处理因为我查了很久也没发现有什么比较好的方法将文字自动的加到图片上于是运用了这个技巧。

1. 列出 menu 选择设备

根据用户选择的不同设备来进行不同资源图片的定义变量。

这里运用了 Get Contents of URL来将屏幕眩光的蒙版图片获取来方便最后的屏幕合成。之前获取的变量都是属于文本格式的地址连接方便后面用在 HTML 中作为 img 的 src 链接。

2. 获取当前歌曲的信息

这一步主要就是用 Get Current Song来获取当前的歌曲的专辑标题艺人专辑封面等信息。我这里运用的判断是否有本地封面的方法是将 album artist 作为文本输出看是否含有 Image 这个文本有则直接后面导出后合成图片没有则在线搜索。

3. 运用 HTML+CSS 来合成封面信息

这里我是直接在电脑上编写好了以后复制粘贴到 text 栏里面。

标题取了请手动截图来避免这一步用户的误操作。

问题

1. 这里我也是不知道怎么将网页直接以图片的形式进行保存所以用了这种引导用户手动截图的方法。
2. 由于获取的本地图片只是文件的格式不知道有没有办法将它直接用到网页中合成那样会方便很多也不会有不同设备的适配问题。

如果有朋友知道什么简便的方法可以告诉我哈。

这儿的背景图片就是根据之前选择的设备来进行变量的控制。

4. 根据屏幕截图尺寸来判断设备

由于之前截图留下来的坑就是不同设备截图后分辨率不一导致后面的合成专辑封面图不能够很好的适配位置。所以这里加入了设备的判断来进行不同情况的合成图片。

1. 获取刚才用户的带有歌曲文字信息的网页截图然后进行裁剪——裁剪掉 workflow 的顶栏以及将图片裁剪为正方形方便分享。
2. 然后将裁剪后的方形图片与本地的专辑封面进行合成。

5. 本地无图片进行在线搜索

在刚刚前面的 if 判断语句识别本地无图片后执行下面的在线搜索的过程。将歌曲标题与歌手信息输入Search iTunes Store 后列一个清单来方便用户选择。这里幸运的是获取的专辑图片是直接的链接我可以直接用在网页中合成方便了不少。

这里也加入了一个判断语句来判断在线时候有封面结果没有的话我就更轻松啦直接将是先做好的带默认封面的设备图链接附上去加上文字就完事啦。

6. 覆盖玻璃反光图片以及收尾

OK到这里又进行了一系列判断和裁剪合成后到了最后一步。

之前不完善版本的设备截图没有覆盖玻璃反光所以看上去有些怪怪的我们在最后运用最开始的设备选择后的变量在最后得以运用给最后的截图加上一个漂亮的反光然后把之前的坑填了——

删除那张无用的截图啊

这里引导用户删除那张带有标题栏无用的截图后就可以整洁的留下一张有用的好看的设备截图了。然后复制歌曲信息到剪贴板大功告成

写在最后

我只是一个喜欢自己鼓捣这些的学工业设计的即将毕业的人这些判断以及语法有很多冗余和不必要希望大家可以指出将它变得更好。写这个 workflow 也只是开始为了满足自己的一些想法。喜欢音乐也会喜欢分享说不定这样分享出去你听着手机音质也变好了呢...脑放开启...分享出来希望大家可以多多交流

最后Believe in Music.