index.html 4.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>音乐</title>
  5. <script type="text/javascript" src="/js/jquery.min.js"></script>
  6. <link rel="stylesheet" href="/css/bootstrap.min.css">
  7. <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  8. <link rel="preconnect" href="https://fonts.googleapis.com">
  9. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10. <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  11. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  12. <link rel="stylesheet" href="/css/style.css">
  13. <script type="text/javascript" src="/js/audio.js"></script>
  14. <script>
  15. document.cookie = "IfIWereANosyCrawlerIWouldDepositMyselfInTheSeaImmediately=true"
  16. document.writeln(`<a class="btn btn-info" href="/fun"><span class="glyphicon glyphicon-home"></span>&nbsp;返回</a>
  17. <div class="page-header"><h3>音乐?!<small>、heneuh94830y9]][]]--08</small></h3></div><p>按创作时间排序。<br>
  18. 玄学的命名规则:一般取开头几个比较重要的音符,数字代表版本,假如不是这个格式那就是我照着谱搬运的。</p>
  19. <p>你能想象,拿着未激活的水果软件,好不容易写完了一首曲子,等心满意足关闭之后才发现格式存反了,这件事有多么绝望吗??</p>
  20. <p>确实花了很多心血,所以我在 <a href="https://creativecommons.org/licenses/by-nc-nd/3.0/">CC BY-NC-ND 3.0</a> 协议下发布吧,链接 <a href="https://43.143.233.184/fun/music/">https://43.143.233.184/fun/music/</a>,署名 schtonn。</p>
  21. <button class="btn btn-default" onclick="$(\'audio\').attr(\'loop\',\'\');$(this).text(\'ok\')">loop</button>`)
  22. var list = ['katyusha,-', 'tetris,-', 'avengers,-,那时还不知道小号要转调,直接跑了...', 'e-e-edfe', 'grasswalk,-', 'where am i going,-', 'sad,-', 'tom,-', 'a#d#cc#c', 'ffgaf', 'bcabc', 'bga#c#', 'cdbc', 'aaccgg,~,灵光一现,但很难接下去了,只好重复', 'dddc,,看到标题就让人猜到节奏了', 'cdd#', 'gddf#dd', 'ag#ag#f#', 'f#g#c#g#a#c#', 'ef#c#ag#', 'friend,-,这个八音盒音色真的很带感', 'd#ba#g#g', 'a#agaa#c', 'ggaa#ag,~', 'a#agaa#c2,~,挺经典的', 'c#d#fc#c,~', 'da#gf#g,~,这个音色其实是大提琴...', 'cdd#d#', 'ef#d#c#2,~', 'bbbdcb,~', 'efcaa', 'cag#g', 'dc#da', 'ebcdcb', 'aeaba,~,首次真正琢磨了一下和弦','bf#db,~,期末考崩了,有感而发','gbdc','ba#gf#','eec#af#,~']
  23. for (let i = list.length - 1; i >= 0; i--) {
  24. var g = list[i].split(',')
  25. document.writeln('<div class="panel panel-' + ((g[1]) ? ((g[1] == '~') ? 'success' : 'info') : 'default') + ' col-md-4 col-sm-6" style="padding:0;transform:translateY(' + ((list.length - i - 1) % 3 * 25 + (list.length - i) * 20) + 'px)">\
  26. <div class="panel-heading"'+ (g[2] ? 'data-toggle="tooltip" data-placement="top"\
  27. title="'+ g[2] + '"' : '') + '>' + g[0] + '</div>\
  28. <div class="panel-body"><audio src="' + g[0].replace(/#/g, '%23') + '.mp3" preload="metadata">\
  29. <p>Your browser doesn\'t support HTML5 audio. Here is a <a href="myAudio.mp4">link to the audio</a> instead.</p></audio>\
  30. <div class="pgs"><span style="font-family:\'Consolas\', Courier, monospace;font-size:10px"></span></div>\
  31. <div class="controls"><span class="played-time">00:00</span><button class="btn btn-default play-pause toggle">\
  32. <span class="glyphicon glyphicon-play" id="icon-btn"></span></button><span class="audio-time" id="audioTime">0</span></div></div></div>')
  33. }
  34. //同时只能播放一个
  35. var audios = $('audio');
  36. function pauseAll() {
  37. var self = this;
  38. [].forEach.call(audios, function (i) {
  39. i !== self && (i.pause(),
  40. $(i).parents('div').children('.controls').children('button').children().removeClass('glyphicon-pause').addClass('glyphicon-play'))
  41. });
  42. }
  43. [].forEach.call(audios, function (i) {
  44. i.addEventListener("play", pauseAll.bind(i));
  45. })
  46. $(function () { $("[data-toggle='tooltip']").tooltip(); });
  47. </script>
  48. <style>
  49. .pgs {
  50. text-align: center;
  51. }
  52. .pgs span {
  53. width: 100%;
  54. position: relative;
  55. z-index: 2;
  56. }
  57. .play-pause {
  58. border: 0;
  59. padding: 0;
  60. width: 40px;
  61. height: 40px;
  62. margin: 0 28px;
  63. background: none;
  64. }
  65. .controls span {
  66. color: #b3b5b7;
  67. font-size: 12px;
  68. display: inline-block;
  69. }
  70. body {
  71. background: linear-gradient(24deg, rgb(187, 219, 219), floralwhite);
  72. background-size: 100% 200%;
  73. }
  74. </style>
  75. </head>
  76. <body>
  77. </body>