品牌型号：联想Yoga 14Sitl

系统：Windows 10 64位专业版

软件版本：Axure PR 9

在Axure PR原型设计软件中，添加音乐和视频可以让原型设计更加生动，增强我们的体验。在教育平台、网站原型、多媒体展示的原型设计中经常会用到。下面为大家介绍怎么在Axure里添加音乐，以及Axure中怎么添加视频的相关内容。

一、怎么在Axure里添加音乐

Axure的内联框架元件允许嵌入网页内容，可以将外部的音乐播放器嵌入到原型中。这种方式不仅操作简单，还能利用音乐平台提供的现成播放器样式和功能，避免自行设计复杂的交互逻辑。我们来进行案例的模拟制作：

1、获取外部音乐的嵌入代码。打开网易云音乐网页版，选择想要嵌入的歌曲。点击歌曲标题，进入歌曲详情页面，找到生成外链播放器。

打开设置播放器的页面后，可以调整播放器的尺寸以及是否自动播放等选项。设置完成后，页面会自动生成并更新相应的html代码，这就是我们在Axure中需要使用的代码。

如果对代码不熟悉，也可以不理解这段代码，直接记住无论是何种播放器、何首歌曲，我们要使用的都是从src开始的部分。

2、在Axure中添加音乐播放器

要添加音乐播放器，我们要使用到内联框架元件。内联框架元件允许我们将外部网页或内容嵌入到原型页面中，特别是当需要展示嵌入式内容时，如视频、地图、第三方插件或音乐播放器等。

在默认元件库中找到内联框架元件后，我们将它拖入到画布中，并调整大小。这里我设置宽度是330像素，高度是450像素，这些数值与网易云音乐嵌入代码默认一致（可以看代码中的width和height数值），确保外部播放器能够完全显示。

如果我们想要界面美观，可以右击内联框架，将滚动条设置为从不滚动，去除右侧和下方的滚动条显示。

双击内联框架，打开链接属性弹窗，选到第二项【链接一个外部的URL或文件】。选择后会默认出现https://，表示的是协议头，是URL链接中的一部分，用于指定访问资源时使用的通信协议，不能删除它。

我们要把第一步中准备好的代码粘贴在https://后面，形成完整的访问链接。完整的链接为https://music.163.com/outchain/player?type=1&id=257377485&auto=1&height=430。

3、测试音乐播放功能。点击工具栏中的【预览】按钮，在浏览器中打开原型，检查音乐播放器是否能正常加载并播放音乐。

无法播放一般是因为这些原因：

①嵌入的代码链接不完整，需要确定包括协议头https://。不要多打或少打了/符号。

②音乐无法播放可能是部分歌曲因版权问题无法使用嵌入功能。可以尝试换其他歌曲。

③无法自动播放问题是因为部分浏览器禁止音频自动播放，需要手动点击播放按钮。或者更换用于预览的浏览器。

通过以上步骤，我们可以轻松在Axure中嵌入音乐播放器。这种方法简单直接，后续可以通过添加遮罩层或调整播放器尺寸等方式，进一步增强原型的交互效果，使其更符合APP中的实际应用需求，提供更加丰富的用户体验。

二、Axure怎么添加视频

在Axure中，添加视频可以通过两种方式实现：一种是通过外部链接嵌入在线视频，另一种是直接嵌入本地MP4视频文件。以下是这两种方式的具体操作步骤：

1、通过外部链接嵌入在线视频。嵌入在线视频的做法和添加音乐的做法是类似的，都需要用到url链接和内联框架元件。

我们先找到想要嵌入的视频的链接。需要注意的是，我们要用的是针对这个视频的单独的链接，而不是网页的链接。以b站的视频为例，我们不能复制网页的地址，而是需要在视频的【分享】中找到【嵌入代码】，点击后会把视频的链接复制到剪贴板中。

复制出来的代码，可以用电脑中的记事本或者通过Axure中文本标签粘贴显示出来。代码中不是所有的内容都需要使用，要用到的是src后面的一串内容，也就是图9中加粗的部分。

接下来，我们回到Axure软件中，找到内联框架元件。视频一般尺寸比较大，我们可以适当调整内联框架的大小。双击内联框架，在【链接一个外部URL或文件】位置的https://后面把准备好的链接内容粘贴上去。

点击工具栏中的【预览】按钮，打开浏览器进行测试。如果视频能够正常播放，说明设置成功。需要确保已连接到网络，否则视频可能无法加载。

2、嵌入本地MP4视频文件

有时候我们无法保证每次预览时都处于有网络的状态，这时就需要使用本地的MP4视频文件来进行展示。需要注意的是，Axure只支持MP4格式的视频文件，如果使用的是其他格式的视频，必须先用工具将其转换为MP4格式，再在Axure中使用。此外，当选择使用本地MP4文件时，无法直接在Axure的预览模式中查看视频效果，我们需要将原型文件打包成HTML格式进行预览。

在设置上，我们同样会用到内联框架元件，差别是这时候我们填写的不是外部的URL链接地址，而是本地视频的位置。可以采用绝对路径位置或相对路径位置。

①绝对路径是指从硬盘的根目录开始到文件所在位置的完整路径。可以在电脑本地中准备好的MP4文件执行复制路径操作。

我们把复制到的地址粘贴到双击后的内联框架链接属性窗口中。例如图12中填写的是电脑本地中E盘路径下test.mp4这个文件。

相对路径是指相对于当前文件所在位置的路径。例如，如果Axure项目文件和视频文件都在同一个文件夹下，那么可以直接使用视频文件的名称。例如，图13中直接填写test.mp4。

填写完毕后，点击Axure的【文件】菜单，选择【生成HTML文件】，然后选择输出位置。建议新建一个文件夹存储导出的html文件，因为它的内容量比较大。 

生成后，我们在本地找到html文件夹，Axure会为每一页的画布生成一个独立的html文件，需要找到包含内联框架的页面对应的HTML文件。这里，我们点击页面_1的html的文件。
 

在浏览器中打开生成的HTML文件后，可以看到视频是否正常播放，这是测试效果的重要步骤。如果视频能够顺利加载并播放，说明设置成功。 

以上就是怎么在Axure里添加音乐，Axure怎么添加视频的全部内容。通过在Axure中添加音乐，可以为原型增添背景音乐或音效，提升用户的沉浸感和互动体验，音乐的加入能够帮助模拟真实的产品环境，尤其适用于音乐类应用或具有音效需求的项目。通过嵌入视频，可以更直观地展示动态内容或功能演示，增强原型的表现力，视频可以帮助更生动地传达复杂的操作过程或展示产品的核心功能。