mirror of
https://gitea.tendokyu.moe/yellowberry/MercuryPlayer.git
synced 2026-10-03 04:17:56 +03:00
48 lines
5.2 KiB
HTML
48 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<head>
|
||
<meta charset="UTF-8" name="viewport" content="width=device-width">
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<title>MercuryPlayer</title>
|
||
<style>html{background:black;font-family:Meiryo}select,option{-moz-font:-moz-pull-down-menu;font-family:Meiryo}canvas{position:fixed;left:0;top:0;height:100vh;width:100vw}</style>
|
||
<style>video{position:fixed;mask-size:100%;mask-image:url('data:image/svg+xml,%3Csvg height%3D"2" width%3D"2" version%3D"1.1" xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%3E%3Cellipse style%3D"fill%3A%23000" cx%3D"1" cy%3D"1" rx%3D"1" ry%3D"1"%2F%3E%3C%2Fsvg%3E')}</style>
|
||
<style>.hide-control div:not(.no-hide) {opacity:0}</style>
|
||
<style>.long-audio audio {width:1000px}</style>
|
||
<style>
|
||
.bgm{display:flex;height:40px;line-height:40px;background:rgba(30,30,30,0.7);width:300px;text-align:center}
|
||
.bgm svg{fill:currentColor}
|
||
.bgm *:hover>svg{fill:#48a0f7}
|
||
.bgm *:hover:active>svg{fill:#2d89e6}
|
||
.bgm>*{flex:none}
|
||
.bgm .btn{width:40px;padding:3px 0}
|
||
.bgm .progress{flex:1}
|
||
.bgm .progress input[type=range]{height:40px;margin:0;padding:0;width:100%}
|
||
.bgm .duration{width:80px;font-family:Arial;font-size:14px}
|
||
.bgm .duration .duration-grey{color:gray}
|
||
.bgm .volume{width:30px;padding:3px 0}
|
||
.bgm .volume_slider{width:50px;padding:0 15px 0 5px}
|
||
.bgm .volume_slider input[type=range]{height:40px;margin:0;padding:0;width:100%}
|
||
.long-audio .bgm {width:1000px}
|
||
.bgm .volume{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPgogIDxwYXRoIGQ9Ik03LjI0NSAxLjM1IDQuMTE3IDUgMiA1YTIgMiAwIDAgMC0yIDJsMCAyYTIgMiAwIDAgMCAyIDJsMi4xMTcgMCAzLjEyOCAzLjY1QzcuODQ4IDE1LjM1MyA5IDE0LjkyNyA5IDE0TDkgMmMwLS45MjctMS4xNTItMS4zNTMtMS43NTUtLjY1eiIvPgogIDxwYXRoIGQ9Ik0xMS43NjQgMTVhLjYyMy42MjMgMCAwIDEtLjMyLTEuMTYyIDYuNzgzIDYuNzgzIDAgMCAwIDMuMzA2LTUuODA1IDYuNzY3IDYuNzY3IDAgMCAwLTMuNDA5LTUuODY0LjYyNC42MjQgMCAxIDEgLjYxOS0xLjA4NUE4LjAxNSA4LjAxNSAwIDAgMSAxNiA4LjAzM2E4LjAzOCA4LjAzOCAwIDAgMS0zLjkxOCA2Ljg3OWMtLjEuMDYtLjIxLjA4OC0uMzE4LjA4OHoiLz4KICA8cGF0aCBkPSJNMTEuNDM0IDExLjg1QTQuOTgyIDQuOTgyIDAgMCAwIDEzLjI1IDhhNC45ODIgNC45ODIgMCAwIDAtMS44MTktMy44NTJsLS40MzEgMCAwIDcuNzAyLjQzNCAweiIvPgo8L3N2Zz4=")}
|
||
.bgm .volume.muted{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPgogIDxwYXRoIGQ9Im0xMSA0LjE0OSAwIDQuMTgxIDEuNzc1IDEuNzc1Yy4zLS42NDEuNDc1LTEuMzUuNDc1LTIuMTA1YTQuOTgxIDQuOTgxIDAgMCAwLTEuODE4LTMuODUxbC0uNDMyIDB6Ii8+CiAgPHBhdGggZD0iTTIuMDY3IDEuMTgzYS42MjYuNjI2IDAgMCAwLS44ODUuODg1TDQuMTE1IDUgMiA1YTIgMiAwIDAgMC0yIDJsMCAyYTIgMiAwIDAgMCAyIDJsMi4xMTcgMCAzLjEyOCAzLjY1QzcuODQ4IDE1LjM1MyA5IDE0LjkyNyA5IDE0bDAtNC4xMTYgMy4zMTcgMy4zMTdjLS4yNzMuMjMyLS41Ni40NS0uODczLjYzNmEuNjI0LjYyNCAwIDAgMC0uMjE4Ljg1Ni42MjEuNjIxIDAgMCAwIC44NTYuMjE5IDcuNTggNy41OCAwIDAgMCAxLjEyMi0uODIzbC43MjkuNzI5YS42MjYuNjI2IDAgMCAwIC44ODQtLjg4NkwyLjA2NyAxLjE4M3oiLz4KICA8cGF0aCBkPSJNOSAyYzAtLjkyNi0xLjE1Mi0xLjM1Mi0xLjc1NS0uNjQ5TDUuNzU3IDMuMDg3IDkgNi4zMyA5IDJ6Ii8+CiAgPHBhdGggZD0iTTExLjM0MSAyLjE2OWE2Ljc2NyA2Ljc2NyAwIDAgMSAzLjQwOSA1Ljg2NCA2LjczMiA2LjczMiAwIDAgMS0uODMgMy4yMTdsLjkxMi45MTJBNy45OTIgNy45OTIgMCAwIDAgMTYgOC4wMzNhOC4wMTggOC4wMTggMCAwIDAtNC4wNC02Ljk1LjYyNS42MjUgMCAwIDAtLjYxOSAxLjA4NnoiLz4KPC9zdmc+")}
|
||
</style>
|
||
</head>
|
||
<body ontouchstart>
|
||
<video src="../../../../mv_S02_204.mp4" preload id="bga"></video>
|
||
<canvas id="canvas"></canvas>
|
||
<div style="position:fixed;left:5px;bottom:5px;color:white" class="no-hide">
|
||
<div>SE Volume: <select id="se_volume"></select> <input id="se_file" name="mer_se_file" type="file" accept="audio/*" placeholder="sound effect file path..."/></div>
|
||
<div class="no-hide"><label><input type="checkbox" id="toggle_ui" autocomplete="off"><span>Hide UI</span></label></div>
|
||
<div><label><input type="checkbox" id="toggle_long_audio" autocomplete="off"><span>Long audio</span></label></div>
|
||
<div style="white-space:pre-wrap" id="stats"></div>
|
||
<div style="display:none"><select id="music_select"></select><br><select id="diffi_select"><option value="0">Normal</option><option value="1">Hard</option><option value="2" selected>Expert</option><option value="3">Inferno</option></select> <input type="button" value="Load" onclick="loadUsingSelect()"></div>
|
||
<div><input id="music_file" name="mer_file" type="file" accept=".mer" value=".mer path..."/> <input id="bgm_file" name="mer_bgm_file" type="file" accept="audio/*" placeholder="sound file path..."/> <input type="button" value="Load" onclick="loadUsingFile()"></div>
|
||
<input type="range" min="5" max="60" step="1" value="38" autocomplete="off" id="speed_input"><span id="speed_val">3.8</span><br>
|
||
<input type="button" value="play" onclick="play()">
|
||
<input type="button" value="pause" onclick="pause()">
|
||
<input type="button" value="stop" onclick="stop()"><br>
|
||
<!--<audio preload id="bgm" controls></audio>-->
|
||
<div class="bgm no-hide" id="bgm_custom"></div>
|
||
</div>
|
||
<script src="chrome-file-helper.js"></script>
|
||
<script src="main.js"></script>
|
||
</body> |