Axure实战15:使用Axure和JavaScript创建一个MusicPlayer音乐播放器

简介: Axure实战15:使用Axure和JavaScript创建一个MusicPlayer音乐播放器

image.png

在本章中,你将学会使用Axure和JavaScript创建一个MusicPlayer音乐播放器。

上一章节,我们学习使用Axure和JavaScript获得ip地址的方法。在之后又在网上找寻了一些其他案例,又发现一些有趣的例子。

我们可以使用JavaScript和网上共享的外链,构建一个音乐/视频播放器,使用Axure和JavaScript做一个音乐播放器、视频播放器的方法基本差不多,这里我们来实现下创建一个MusicPlayer音乐播放器。


项目搭建


首先,创建一个新项目,命名为MusicPlayer。

image.png

基础准备


这里使用网易云音乐提供的外链播放器插件,我们可以直接在网易云音乐网页版中找到外链播放器的链接。


image.png

我们随便搜索一首歌,在播放页面唱片下,可以看到“生成外链播放器”的入口。

在网易云插件的页面,我们可以看到插件提供的HTML代码,我们复制这个代码。

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86


image.png

页面样式


有了代码之后,我们来完成样式部分。

我们需要有一个View来承载并显示HTML代码,拖入一个“矩形2”组件,命名为“MusicPlayer”。

设置位置为(40,40),设置尺寸为520*80,设置文字字号为12,设置边距左边为10。

最后把网易云提供的HTML代码复制到里面。


image.png

然后,我们来看下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())})});

image.png

这样,我们就完成了所需的页面样式。

页面交互


下面我们完成下交互效果。

MusicPlayer矩形承载的是一个View,加入HTML代码后作为一个视图,而Code矩形里面写的是一个加载View的JavaScript方法。

我们要做的,就是页面载入时,在MusicPlayer矩形加载Code矩形里的方法。

image.png

选中MusicPlayer矩形,在“交互”工具栏中新建交互,选择“载入时”,选择“打开链接”,选择链接到“链接到URL或文件路径”,点击fx。

在编辑值弹窗中,我们新建一个局部变量,引用code矩形中的文字代码,然后插入变量。

效果预览


保存后,我们在浏览器中预览下效果。


image.png

哈哈哈,效果不错!

为了让这个网站能够公开访问,我们可以生成html文件,然后发布到gitHub或者gitee中,这样就可以将网站分享给朋友们了。

网站地址


MusicPlayer音乐播放器:ricardowesley.gitee.io/musicplayer

快来动手试试吧!



相关文章
|
4月前
|
人工智能 自然语言处理 JavaScript
通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
247 4
 通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
|
11天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
2月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
88 1
|
6月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
202 0
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
|
中间件 API
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
231 0
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
295 0
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
241 2
|
10月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
161 1
JavaScript中的原型 保姆级文章一文搞懂
|
10月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
99 0