绘画相关，MIDI

在线挑战和比赛平台（其实也是自制的，不会有什么记录的）

1. Instagram：

   • 搜索标签如 #30DayDrawingChallenge、#Inktober（十月绘画挑战）、#DrawThisInYourStyle 等，找到很多艺术家发起的挑战。

2. DeviantArt：

   • 这个艺术社区经常有各种挑战和比赛，你可以在其论坛或者活动页面找到相关信息。

3. ArtStation：

   • 这个平台有时会举办比赛，特别是针对数字艺术和插画。可以关注其活动页面。

4. Reddit：（这个网站更像x）

   • 在 Reddit 上的 r/ArtChallenges 或 r/learnart 版块，常有用户分享挑战和比赛信息。

5. Pinterest：

   • 搜索“绘画挑战”或“艺术挑战”，可以找到很多灵感和链接到相关活动。

6. 网站和应用：

   • SketchDaily：提供每天的绘画主题挑战。
   • Doodle Addicts：有各种绘画挑战和活动，鼓励艺术创作。

MIDI介绍

MIDI 文件并不直接记录钢琴的声音，而是记录了与乐器演奏相关的数字信息。可以用MIDI文件来模拟钢琴演奏，但它并不是钢琴的录音。

什么是MIDI？

MIDI（Musical Instrument Digital Interface）是一种标准的数字通信协议，用于电子乐器和电脑之间传输音乐演奏信息。它记录的是乐器的操作信息，如：

• 按下了哪个键
• 按下的力度
• 音符持续的时间
• 音高变化、节奏、音量等

重点：MIDI文件本身不包含音频，它存储的是对音符的描述。你可以使用这些信息驱动不同的电子乐器或虚拟乐器来“播放”声音。比如你可以用一个MIDI文件驱动钢琴音色，或者用它驱动其他电子音源，如合成器、小提琴等。

MIDI 和钢琴录音

如果你用一台带有MIDI接口的电子钢琴或数字钢琴演奏，它会输出MIDI信号。你可以把这些信号录制成MIDI文件，MIDI文件将记录下你在钢琴上弹的每个音符、力度和时间信息。

但是，如果你是在录制一个真实的声学钢琴演奏，录制的是实际的声音波形，那是生成音频文件（如WAV、MP3），而不是MIDI文件。MIDI更像是“乐谱”，而音频文件是“声音本身”。

一般情况下，录制MIDI文件是通过电子乐器（如电子钢琴、MIDI键盘）实时演奏来完成的。演奏者弹奏一遍，设备会记录下每个音符、力度、持续时间等信息，然后生成一个MIDI文件。

录制MIDI的常见方式：

1. 电子钢琴或MIDI键盘：
   • 演奏者使用具有MIDI接口的电子乐器（如电子钢琴或MIDI键盘）进行演奏。设备会通过MIDI接口将演奏的信息（如按键、力度等）发送到电脑或录音设备上。
   • 电脑上运行的数字音频工作站（DAW，如Logic Pro、Ableton Live、FL Studio等）会实时接收这些MIDI信号并记录下来，生成一个MIDI文件。
2. DAW中的MIDI编辑器：
   • 除了实际演奏外，也可以在DAW中手动编辑MIDI。通过MIDI编辑器，用户可以逐个输入音符、调整时间、力度等参数，虽然效率较低，但这种方式更适合需要精确控制的音乐创作。
3. MIDI控制器：
   • 一些MIDI控制器（如鼓垫、控制器键盘等）也可以用来录制MIDI信息。通过这些设备，演奏者可以触发不同的音符和节奏，DAW会记录这些输入。

为什么使用MIDI录制：

• 方便修改：MIDI文件不像录制的音频，它可以在后期轻松调整音符、节奏、力度等属性，甚至可以更改使用的乐器音色（比如从钢琴变为吉他）。
• 灵活性高：MIDI可以驱动各种虚拟乐器，适用于不同的编曲场景。
• 便于存储：MIDI文件非常小，存储的是数字信息而不是声音，体积比音频文件小得多。

MIDI制作的主要方式

1. 亲自演奏（实时录制MIDI）：

   • 场景：许多乐器演奏者或注重音乐表现力的人，尤其是钢琴家、键盘手或者喜欢用电子乐器创作的艺术家，会选择亲自弹奏MIDI。这种方式能够捕捉到自然的力度变化和演奏表达，是最“人性化”的录制方式。
   • 特点：实时录制能够保留演奏的自然节奏和情感，之后可以对MIDI数据进行细微调整。
   • 使用比例：在传统音乐制作、现场表演或强调人性化表达的创作中，亲自演奏的比例较高，估计占比可以在 50% - 70% 左右，尤其是对于钢琴、弦乐等需要情感表达的乐器。

2. 手动编写MIDI：

   • 场景：在电子音乐、舞曲、流行音乐制作中，许多制作人会直接在数字音频工作站（DAW）中手动编写MIDI音符。特别是在电子乐、EDM等风格中，节奏和音符通常需要精准控制，手动编写MIDI常常能够更好地实现所需的细节。
   • 特点：通过鼠标和键盘，制作人可以在DAW中的钢琴卷轴上手动编辑每个音符的音高、时值和力度。这样可以实现完全的控制，但也会让音乐听起来更“机械化”。
   • 使用比例：对于电子音乐或高度依赖编程的音乐风格，手动编写MIDI可能占到 30% - 50%，尤其是当精确度和速度是首要考虑时。

3. MIDI生成工具：

   • 场景：一些作曲者使用算法、MIDI库或自动化工具来生成MIDI数据。例如，MIDI文件库提供了预制的节奏和旋律，作曲者只需要对其进行调整和优化。这种方式较少依赖实际演奏或手动编写，但能够加快制作流程。
   • 特点：通过使用预设片段或生成工具，可以快速创建复杂的音符和节奏，不需要实际演奏的技巧。
   • 使用比例：这种方式在 20% - 30% 左右，尤其在游戏音乐、电影配乐等需要大量音频片段的领域。

亲自演奏 vs 手动编写的对比

• 亲自演奏的优点：

  • 保留演奏者的情感和表现力。
  • 可以快速捕捉复杂的和弦、即兴演奏。
  • 适合需要自然流动感的音乐，如古典、爵士或流行音乐。

• 手动编写的优点：

  • 精确控制每一个音符的时间和力度，适合电子音乐、舞曲等。
  • 允许后期大幅度修改，创造超出人类演奏能力的节奏和音符。
  • 没有演奏技术限制，适合不擅长乐器演奏的制作人。

一个和MIDI相关的音乐网站的源代码部分解释

该HTML代码展示了一个网页的基本结构，其中包含了许多外部资源的引用（CSS文件、JavaScript文件）以及一些控制音乐播放、图片切换、评论和回复等功能的JavaScript代码。以下是代码的各个部分的解析：

1. meta 标签

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">

• 设置网页编码为UTF-8，确保网页的内容可以正确显示各种语言和符号。
• 通过 viewport 标签，设置网页的显示比例，保证在不同设备上有良好的浏览体验。

2. link 标签

<link href="css/workdetail.css" rel="stylesheet">
<link href="css/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">

• 引入了三个CSS文件：workdetail.css、video-js.css 和 index.css，它们分别用于定义页面的样式。

3. script 标签

<script type="text/javascript" src="js/jquery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/m3u8/video.js"></script>
<script type="text/javascript" src="js/m3u8/videojs-contrib-hls.js"></script>
<script type="text/javascript" src="js/pz/util.js"></script>
<script type="text/javascript" src="js/pz/perfect_piano_api.js"></script>
<script type="text/javascript" src="js/pz/head.js"></script>
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Widgets/Loader.js" type="text/javascript"></script>
<script src="./js/Window/Event.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/inc/jasmid/stream.js"></script>
<script src="./js/inc/jasmid/midifile.js"></script>
<script src="./js/inc/jasmid/replayer.js"></script>
<script src="./js/MIDI/decode.js" type="text/javascript"></script>
<script src="./js/inc/Base64.js" type="text/javascript"></script>
<script src="./js/inc/base64binary.js" type="text/javascript"></script>

• 加载了多个JavaScript库，包括：
  • jQuery：用于简化DOM操作和Ajax请求。
  • video.js 和 videojs-contrib-hls.js：用于支持HLS协议的视频播放。
  • 一些自定义JavaScript，如 util.js、perfect_piano_api.js 和 head.js，可能用于项目中的特定功能。
  • MIDI相关库，提供对MIDI文件的加载、播放、解析、声音插件加载等功能支持。
  • jasmid 用于MIDI文件的解析和回放。

4. JavaScript 功能

播放/暂停音乐

var pausePlayStop = function(stop) {var d = document.getElementById("pausePlayStop");if (stop) {MIDI.Player.stop();d.src = "./images/play.png";} else if (MIDI.Player.playing) {d.src = "./images/play.png";MIDI.Player.pause(true);} else {d.src = "./images/pause.png";MIDI.Player.resume();} 
};

• 这个函数控制播放和暂停按钮的行为，当音乐正在播放时点击可以暂停，反之亦然。

加载MIDI文件

function loadMIDIfile(file_url) {...player.loadFile(file_url, function(note, isNeedDrumPlugin,isNeedGuitarPlugin) {	...MIDI.loadPlugin({soundfontUrl: "./js/soundfont/",instruments : ins,notes: note,callback: function() {$(".loading-spinner").hide();$(".midi-play-button").show();}});});
}

• 该函数用于加载MIDI文件，并在加载完成后调用 MIDI.loadPlugin 加载所需的声音插件。
• 根据文件中是否需要打击乐或吉他插件，动态决定要加载的乐器。

MIDI播放进度

function loadMIDIfile(file_url) {...player.loadFile(file_url, function(note, isNeedDrumPlugin,isNeedGuitarPlugin) {	...MIDI.loadPlugin({soundfontUrl: "./js/soundfont/",instruments : ins,notes: note,callback: function() {$(".loading-spinner").hide();$(".midi-play-button").show();}});});
}

• 该函数设置了MIDI播放器的动画更新函数，实时更新播放进度条，并在播放完成时调用 pausePlayStop(true) 停止播放。

5. 其他功能

图片切换

function prePicture() {...
}
function nextPicture() {...
}

• prePicture 和 nextPicture 用于图片的左右切换，通过调整显示与隐藏的图片实现图片轮播效果。

评论与回复

function displayReply(id) {...
}
function addComment() {...
}

• displayReply 用于显示回复框，addComment 则用于提交评论或回复内容。

MIDI文件在哪

MIDI 文件是通过 loadMIDIfile() 函数加载的。在这里，file_url 变量代表了实际的 MIDI 文件地址，调用 MIDI.Player.loadFile(file_url) 来加载并播放 MIDI 文件。

因此，MIDI 文件应该是位于某个 URL 上的资源，file_url 代表的是 MIDI 文件的完整路径。例如：

function loadMIDIfile(file_url) {file_url += "?wsiphost=local";player = MIDI.Player;player.loadFile(file_url, function(note, isNeedDrumPlugin,isNeedGuitarPlugin) { ...});
}

你只需要调用 loadMIDIfile() 函数时传入 MIDI 文件的路径即可，例如 loadMIDIfile('path/to/your/midi/file.mid')。

怎么想办法找到

在这个网站的源代码里，file_url 是作为参数传递给 loadMIDIfile(file_url) 函数的。如果你想找到具体的 MIDI 文件的 URL，应该寻找在哪里调用了 loadMIDIfile()，并查看它是如何传递 file_url 的。

我可以帮你推断几种可能的地方去找这个 URL：

1. 寻找loadMIDIfile()函数的调用： 在源代码中查找所有调用 loadMIDIfile() 的地方，查看传入的参数。例如，如果调用是 loadMIDIfile('path/to/your/midi/file.mid')，那么 'path/to/your/midi/file.mid' 就是你要找的 URL。

2. 静态文件或动态生成 URL： 如果 URL 是动态生成的，可能是通过某个变量或函数生成的。你可以检查 file_url 是不是通过其他函数或用户交互（例如表单、按钮点击等）传递的。

3. 查找file_url相关的定义： 如果 URL 是存储在一个变量中，代码中可能有一处专门定义了 file_url，比如：

   var file_url = 'path/to/midi/file.mid';
   loadMIDIfile(file_url);
   

4. 通过网络请求加载： 也可能 URL 是通过某种网络请求（如 fetch()、$.ajax() 等）获取的，你可以查看代码是否有类似的网络请求来获得 MIDI 文件的地址。

找到Load的函数了之后

player.loadFile(file_url, function(note, isNeedDrumPlugin,isNeedGuitarPlugin) {	//console.log("loadFileComplete");//player////MIDI.loader = new widgets.Loader;//console.log("isNeedDrumPlugin-----------:" + isNeedDrumPlugin);//console.log("isNeedGuitarPlugin-----------:" + isNeedGuitarPlugin);ins = [ "acoustic_grand_piano", "drum", "acoustic_guitar_steel"];if(isNeedGuitarPlugin && isNeedDrumPlugin){ins  = [ "acoustic_grand_piano", "drum", "acoustic_guitar_steel"];}else if(!isNeedGuitarPlugin && isNeedDrumPlugin){ins  = [ "acoustic_grand_piano", "drum"];}else if(isNeedGuitarPlugin && !isNeedDrumPlugin){ins = [ "acoustic_grand_piano", "acoustic_guitar_steel"];}else{ins = "acoustic_grand_piano";}//ins = "acoustic_grand_piano";MIDI.loadPlugin({soundfontUrl: "./js/soundfont/",instruments : ins,notes: note,//instrument: "acoustic_grand_piano",//instrument: "drawbar_organ",//instrument: "drum",callback: function() {$(".loading-spinner").hide();$(".midi-play-button").show();}});});