html-midi-player 项目教程

华建万

于 2024-09-25 08:34:40 发布

阅读量801

点赞数 7

本文链接：https://blog.csdn.net/gitblog_00572/article/details/142511513

版权

html-midi-player 项目教程

html-midi-player 🎹 Play and display MIDI files on the web 项目地址: https://gitcode.com/gh_mirrors/ht/html-midi-player

1、项目介绍

html-midi-player 是一个用于在网页中播放和显示 MIDI 文件的 Web 组件。它允许用户在浏览器中直接播放 MIDI 文件，并提供了可视化功能，如钢琴卷帘视图。该项目是基于 Google 的 Magenta.js 库开发的，旨在简化在网页中嵌入 MIDI 播放器的复杂性。

2、项目快速启动

2.1 安装

你可以通过以下方式将 html-midi-player 添加到你的项目中：

使用 CDN

<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0"></script>

使用 NPM

npm install --save html-midi-player

2.2 使用

在你的 HTML 文件中添加以下代码来嵌入 MIDI 播放器和可视化器：

<midi-player src="https://magenta.github.io/magenta-js/music/demos/melody.mid" sound-font visualizer="#myVisualizer"></midi-player>
<midi-visualizer type="piano-roll" id="myVisualizer"></midi-visualizer>

2.3 完整示例

以下是一个完整的示例，展示了如何在网页中嵌入 MIDI 播放器和可视化器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MIDI Player Example</title>
    <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0"></script>
</head>
<body>
    <midi-player src="https://magenta.github.io/magenta-js/music/demos/melody.mid" sound-font visualizer="#myVisualizer"></midi-player>
    <midi-visualizer type="piano-roll" id="myVisualizer"></midi-visualizer>
</body>
</html>