1.背景音乐组件

小常发表于:2018年12月06日 14:03:29更新于:2019年04月28日 14:24:15

视频教程

一、应用场景

每个H5作品仅可以设置一个背景音乐,它可以贯穿整个H5作品进行播放,自带图标控制暂停播放;背景音乐可以自动播放或被触发播放。


二、素材要求

1.必须是标准MP3格式音频文件, 不建议使用WAV/MIDI等其他音频格式。

2.考虑到在微信移动端加载,建议不超过500K,可以截取背景音乐的一段循环播放。

3.格式转换/剪辑/压缩

格式工厂Windows版(点击下载)推荐!

Fission(目前只有Mac版,具体使用攻略请看这里

Adobe Audition(点击下载

cooledit(点击下载

Corel VideoStudio,中文名会声会影(点击下载

QQ音乐(点击下载)(音频剪辑、压缩)

GoldWave(点击下载)(编辑、播放、录制、转换)

WinMP3Shrink(点击下载)(压缩软件)

Premiere(点击下载)(多功能编辑)


4.注意事项

对于在微信里展示的内容,为了确保性能和展示效果,我们对音频素材有如下建议:

作为背景音乐的音频文件,一般不要超过1M,建议400kb左右,在保证场景效果的前提下建议截取一段并结合循环播放进行使用


5.免费声音资源网站

这里我们只是分享给大家素材网站,如需商用请仔细阅读素材网站上的版权标注,一切责任将由使用者本人承担



三、组件用法

1.鼠标移动到音乐组件,显示2个组件,点击第一个背景音乐添加。

image.png


2.点击背景音乐后,显示音乐素材弹窗,点击素材添加。

image.png


3.添加后的背景音乐在Masterpage页面,不在当前页面显示。

0015caf197729f2c90b31870c3ef434


4.切换到masterpage页面,可以查看新添加的背景音乐。

0015caf1a5099dccf27f206faf5405f


5.选中音频标识双击,可以修改文件

image.png


6.点击背景音乐,按键盘上的delete键可以删除,接着按键盘的Ctrl+Z可以撤销删除。

image.png


7.还有一个删除方式是切换到页面,在右侧作品信息中找到背景音乐删除。

image.png


8.在masterpage页面双击背景音乐组件,可以替换素材文件,GIF动图演示。

0015673b7565d4543887b3c33a01959


0015673b758b3448d7c8b3897a41b90


9.注意:如果整个作品中没有添加背景音乐,但是只在Masterpage页面添加了一个音频,H5会将这个音频作为背景音乐。


10.如何显示背景音乐的图标?

(1)只需要在作品信息面板勾选“显示背景音乐图标”,就可以全局控制音乐,H5播放过程中点击该图标可控制背景音乐播放暂停。

blob.png


(2)替换图标素材

音乐的播放暂停按钮除了可使用自带,也可以将“音符”图标替换成其他图标素材。

0015673b75f429f24ad89bea1fa3842


高级用法

1.控制音乐的播放/暂停

(1)如何在翻页的时候暂停背景音乐?从某一页开始播放音乐,或者从某一页开始暂停音乐。

用页面触发器——切换到当前页面时——播放/暂停音频——选择音频文件。点击M,表示要控制Masterpage页面的音频播放。

image.png


(2)这个触发行为在哪?

0015c08bf97c6086314bd40f583e6e6


(3)如果需要替换成其他音符图标素材,可以参考下图(按钮的素材是可以替换的)

001567779ac9d2ce9abea1be858c91c


2.开始播放视频时,暂停掉音乐。

0015cb001b860aa396683bc56694fc2


3.如何替换背景音乐控制按钮

背景音乐默认是自动循环播放的,要是想要通过按钮控制暂停播放,必须另外进行设置。

image.png



4.选中背景音乐图标,可以修改替换标识显示等相关设置

image.png


5.注意:编辑器中不支持对音频文件音量大小的调节,所以需要各位派友在相关的音频软件中调整好再上传音频文件。


6.⚠️关于背景音乐图标的注意事项:

  • 背景音乐图标主要给背景音乐使用,如果没有添加背景音乐素材,不建议大家勾选显示背景音乐图标。因为在点击该图标时,会默认用masterpage 上的第一个音频作为背景音乐。

  • 也可以自己添加合适的按钮组件来控制音乐播放暂停。


7.Q&A:

Q:为什么我设置了还是没有看到音乐图标呢?

A:请确认是否开启了显示MasterPage。因为默认是放在Masterpage中的。