编者按:继前两篇文章《使用中继器进行图片旋转》和《使用中继器进行下拉菜单》之后，今天，本文作者教大学使用中继器和网易云外展播放器制作一个真正能播放音乐列表的音乐播放器原型。赶紧学！

一、原型预览效果

原型预览地址:https://9pbs45.axshare.com/# g = 1

二、材料准备

图片×1，文字×5(歌曲标题-歌手，简介，分享，评论，赞)，图标×3(分享，评论，赞)，按钮×2(上一首和下一首歌)，矩形×1(代码)，复读机×1(默认设置分页显示，每页一行)。

如下图所示，将矩形放置在中继器中:

三、歌曲准备

我们想去网易云音乐，找到自己喜欢的歌曲，点击生成外展播放器:

我们可以修改播放器大小和播放模式，完成后复制代码:

四.复读机形式

需要设置几列:

Column0就是刚刚我们复制的代码，直接复制进去即可；pic代表歌曲的封面图片，右键导入图片或者复制粘贴均可；songsinger代表歌曲-歌手，手动输入，或者在excel表格输入好再复制会较快；introduce代表歌曲的介绍文字，手动输入，或者在excel表格输入好再复制会较快。

动词 （verb的缩写）交互式设置

加载复读机各项时:将简介、歌手、矩形码的文本值设置为[[Item . introduction]]、[[Item . sonsinger]]和[[Item。列0]]，设置图片并将图片值设置为item.pic

加载矩形时:这里要用Axure高级教程里提到的方法:做一个可以引用Axure中html、ccs、js等代码的控件文章，调用js，回头看看我之前写的文章。

当鼠标点击下一步按钮时:这里有两种情况。如果这一页不是最后一页，那么我们需要将中继器设置到下一页；如果是最后一页，我们就把复读机设置到第一页。

用鼠标点击上一个按钮时:这里也有两种情况。如果这一页不是第一页，那么我们需要将中继器设置到上一页；如果是最后一页，我们就把复读机设置到最后一页。