在本章中，你将学会使用Axure和JavaScript创建一个MusicPlayer音乐播放器。
上一章节，我们学习使用Axure和JavaScript获得ip地址的方法。在之后又在网上找寻了一些其他案例，又发现一些有趣的例子。
我们可以使用JavaScript和网上共享的外链，构建一个音乐/视频播放器，使用Axure和JavaScript做一个音乐播放器、视频播放器的方法基本差不多，这里我们来实现下创建一个MusicPlayer音乐播放器。
项目搭建
首先，创建一个新项目，命名为MusicPlayer。
基础准备
这里使用网易云音乐提供的外链播放器插件，我们可以直接在网易云音乐网页版中找到外链播放器的链接。
我们随便搜索一首歌，在播放页面唱片下，可以看到“生成外链播放器”的入口。
在网易云插件的页面，我们可以看到插件提供的HTML代码，我们复制这个代码。
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1901371647&auto=1&height=66"></iframe>
复制代码页面样式
有了代码之后，我们来完成样式部分。
我们需要有一个View来承载并显示HTML代码，拖入一个“矩形2”组件，命名为“MusicPlayer”。
设置位置为（40，40），设置尺寸为520*80，设置文字字号为12，设置边距左边为10。
最后把网易云提供的HTML代码复制到里面。
然后，我们来看下JavaScript的方法，为了方便大家学习，这里也都将代码展示出来。
拖入一个“矩形1”组件，命名为“code”。
设置位置对齐上面的MusicPlayer矩形，距离40，设置尺寸为520*80。设置文字字号为12，设置线段颜色为#F0F2F5，设置圆角半径为8，左边距为10。
然后将下面的代码复制到code矩形里，这里注意的是【data-label=】，后面接的要修改为我们用来展示的矩形的名称。
javascript:
$(document).ready(function(){$('[data-label=MusicPlayer]').each(function(){$(this).html($(this).find('p').text())})});
复制代码这样，我们就完成了所需的页面样式。
页面交互
下面我们完成下交互效果。
MusicPlayer矩形承载的是一个View，加入HTML代码后作为一个视图，而Code矩形里面写的是一个加载View的JavaScript方法。
我们要做的，就是页面载入时，在MusicPlayer矩形加载Code矩形里的方法。
选中MusicPlayer矩形，在“交互”工具栏中新建交互，选择“载入时”，选择“打开链接”，选择链接到“链接到URL或文件路径”，点击fx。
在编辑值弹窗中，我们新建一个局部变量，引用code矩形中的文字代码，然后插入变量。
效果预览
保存后，我们在浏览器中预览下效果。
哈哈哈，效果不错！
为了让这个网站能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
MusicPlayer音乐播放器：ricardowesley.gitee.io/musicplayer
快来动手试试吧！
