JustAddMusic是一款音乐播放和可视化js插件-BFW插件库

JustAddMusic是一款音乐播放和可视化js插件

JustAddMusic（又名 JAM）是一款音乐播放和可视化js插件，它使将音乐和音乐可视化添加到您的网络体验变得简单。

主要功能和特性

加载音频文件，或从本地文件系统拖放

用于音量、搜索、播放/暂停的键盘控制

显示加载状态和播放时间的简单 UI

用于音乐可视化的强大音频分析

用一行代码启用

用于自定义 UI/控件的 API

网络上只有 ~3kb

在最新版本的 Chrome、Edge、Safari 和 FireFox 中进行了测试。

音乐播放示例

本示例将加载指定的音频文件并播放，显示加载/播放状态，启用键盘控制并允许用户将自己的音频文件拖到窗口上播放。

var jam = new JustAddMusic ( "myMusic.mp3" ) ;

音乐可视化示例

此示例将播放音乐，并通过更改文档的背景颜色对其平均音量做出反应。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/JustAddMusic.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        new JustAddMusic({
        	src: "//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3",
        	ontick: function(o) {
        		var l = Math.round(o.all.avg * 100);
        		document.body.style.background = "hsl(90,100%,"+l+"%)";
        	}
        });
    </script>
</body>

</html>

config配置

可选的 config 参数可以是指向音频文件的字符串 URI，也可以是具有以下任何初始化属性的对象：

src: 最初加载的音频文件的 uri

dropTarget=window: 查询选择器或 HTMLElement 用作拖放目标

deltaT=50：用于计算增量值的时间（以毫秒为单位）

avgT=150：用于计算平均值的时间（以毫秒为单位）

spectrumBins=0：启用spectrum并设置要包含在其中的值的数量

这些属性可以使用 config 参数设置，也可以直接在 JAM 实例上设置。

gain=1：提高分析器的音量（不是播放音量）。这可能导致值高于 1

volume=1: 播放音量，不影响分析仪

paused=false：播放/暂停音频

loop=false：当当前音频到达结尾时循环播放

keyControl=true: 启用按键控制（见下文）

tickInterval=16: 间隔以毫秒为单位勾选分析器或 0 以手动勾选 tick()

ui=true: 显示/隐藏简单的 ui (true)

label: 在 UI 中的其他内容之前注入的文本或 html

audioData：只读。具有最新音频数据的对象（请参阅下面的音频数据）

onstart: 新音频文件开始播放时调用的回调

onended: 当音频播放到最后而不循环时调用的回调

ontick: 每次分析器以最新的音频数据作为参数时调用

onprogress: 使用单个参数调用，指示文件加载进度为 0-1

方法

loadAudio(src): 加载指定的音频文件，如果paused为 false则播放

abort()：中止活动负载

play(): 恢复播放

pause(): 暂停播放

stop()：暂停播放，将播放重置为开始，并中止活动加载

seek(time): 寻找指定的时间（以秒为单位）

skip(time): 向前或向后跳过指定的时间（以秒为单位）

tick()：运行分析器并返回最新的音频数据（见下文）。如果 tickInterval > 0，则自动调用。

音频数据

音频数据对象具有以下属性：

t: 时间戳

low, mid, high, all: 包含频率范围值的对象

spectrum:spectrumBins包含 0-1 范围内值的长度数组

每个频率范围对象都具有以下属性：

val: 范围的瞬时值

avg:avgT毫秒内的平均值

delta:deltaT几毫秒内的值变化

trend：avg值在avgT几毫秒内的变化

hit: 如果在波段中检测到值的显着跳跃，则为真

键盘控制

如果keyControl启用，可以使用以下键来控制播放：

空格 - 播放/暂停

输入 - 从头开始播放

向上/向下箭头 - 音量

左/右箭头 - 跳过 5 秒（如果按住 shift 则为 15 秒，如果按住则为 60 秒，如果两者都为 180 秒）

样式

UI div 通过.jam-ui类进行样式设置。它的默认样式被注入到头部顶部的样式块中。

当用户将文件拖到上时dropTarget，.jam-drop会向其中添加该类以方便设置样式。

项目地址：https://github.com/gskinner/JustAddMusic

JustAddMusic是一款音乐播放和可视化js插件

网友评论0

bideo.js

video.js

RecordRTC.js

videoconverter.js

soundjs.min.js

audio.min.js

jquery.vide.js

recorder.js

hls.js

typemoneky-min.js