maicong/Remix.html

## Remix.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Remix</title>
  <style>
    body {
      margin: 0;
    }
    .input,
    .audio {
      width: 520px;
      padding: 10px;
      margin: 10px auto;
      border: 2px #ccc solid;
      border-radius: 5px;
      box-sizing: border-box;
    }
    .input {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .input label {
      display: flex;
      align-items: center;
      font-size: 14px;
    }
    .input label + label {
      margin-left: 10px;
    }
    .input input {
      flex: 1;
      width: 100%;
      height: 26px;
      margin-left: 5px;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: inset 1px 1px 2px 0 #bbb;
      outline: 0;
    }
    .input #file {
      padding: 5px;
      background: #eee;
      cursor: pointer;
    }
    input::-webkit-file-upload-button {
      width: 0;
      padding: 0;
      border: 0;
    }
    .audio audio {
      width: 100%;
      height: 46px;
      margin-top: 10px;
      outline: none;
    }
    .audio:empty {
      display: none;
    }
    audio::-webkit-media-controls {
      background: #eee;
      border-radius: 5px;
    }
    audio::-webkit-media-controls-enclosure {
      background: transparent;
    }
    audio::-webkit-media-controls-play-button {
      margin-right: 10px;
      border-radius: 5px;
    }
    audio::-webkit-media-controls-current-time-display,
    audio::-webkit-media-controls-time-remaining-display {
      font-family: Menlo, Monaco, 'Courier New', monospace;
    }
    audio::-webkit-media-controls-timeline {
      pointer-events: none;
    }
    audio::-webkit-media-controls-volume-control-container {
      display: none;
    }
  </style>
</head>
<body>
  <div class="input">
    <label class="length">
      <span>重奏(次):</span>
      <input id="length" type="number" min="0" value="10">
    </label>
    <label class="delay">
      <span>延时(秒):</span>
      <input id="delay" type="number" min="0" value="0.1">
    </label>
    <label class="file">
      <span>音频(Mp3):</span>
      <input id="file" type="file" accept="audio/mp3">
    </label>
  </div>
  <div id="audio" class="audio"></div>
  <script>
    const fileEl = document.getElementById('file')
    const delayEl = document.getElementById('delay')
    const audioEl = document.getElementById('audio')
    const lengthEl = document.getElementById('length')
    let timer = null

    lengthEl.onchange = delayEl.onchange = fileEl.onchange = () => {
      const file = fileEl.files[0]
      const delay = delayEl.value || 0
      const reader = new FileReader()
      const length = lengthEl.value

      if (!file) return

      reader.onload = () => {
        const audios = Array.from({ length }, (v, i) => {
          const audio = document.createElement('audio')
          audio.loop = true
          audio.controls = true
          audio.src = reader.result
          audio.id = `audio-${i + 1}`
          audio.controlsList="nodownload"
          audio.volume = 1 - i / length
          // audio.currentTime = Number(delay + (delay * i).toFixed(2))
          console.dir(audio.currentTime)
          return audio
        })
        audioEl.innerHTML = ''
        // while (audioEl.hasChildNodes()) {
        //   audioEl.removeChild(audioEl.lastChild)
        // }
        if (timer) {
          clearTimeout(timer)
        }
        for (const [i, el] of audios.entries()) {
          timer = setTimeout(() => {
            audioEl.appendChild(el)
            el.play()
          }, delay * 1000 * i)
        }
      }
      reader.readAsDataURL(file)
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Remix</title>
	<style>
	body {
	margin: 0;
	}
	.input,
	.audio {
	width: 520px;
	padding: 10px;
	margin: 10px auto;
	border: 2px #ccc solid;
	border-radius: 5px;
	box-sizing: border-box;
	}
	.input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	}
	.input label {
	display: flex;
	align-items: center;
	font-size: 14px;
	}
	.input label + label {
	margin-left: 10px;
	}
	.input input {
	flex: 1;
	width: 100%;
	height: 26px;
	margin-left: 5px;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: inset 1px 1px 2px 0 #bbb;
	outline: 0;
	}
	.input #file {
	padding: 5px;
	background: #eee;
	cursor: pointer;
	}
	input::-webkit-file-upload-button {
	width: 0;
	padding: 0;
	border: 0;
	}
	.audio audio {
	width: 100%;
	height: 46px;
	margin-top: 10px;
	outline: none;
	}
	.audio:empty {
	display: none;
	}
	audio::-webkit-media-controls {
	background: #eee;
	border-radius: 5px;
	}
	audio::-webkit-media-controls-enclosure {
	background: transparent;
	}
	audio::-webkit-media-controls-play-button {
	margin-right: 10px;
	border-radius: 5px;
	}
	audio::-webkit-media-controls-current-time-display,
	audio::-webkit-media-controls-time-remaining-display {
	font-family: Menlo, Monaco, 'Courier New', monospace;
	}
	audio::-webkit-media-controls-timeline {
	pointer-events: none;
	}
	audio::-webkit-media-controls-volume-control-container {
	display: none;
	}
	</style>
	</head>
	<body>
	<div class="input">
	<label class="length">
	<span>重奏(次):</span>
	<input id="length" type="number" min="0" value="10">
	</label>
	<label class="delay">
	<span>延时(秒):</span>
	<input id="delay" type="number" min="0" value="0.1">
	</label>
	<label class="file">
	<span>音频(Mp3):</span>
	<input id="file" type="file" accept="audio/mp3">
	</label>
	</div>
	<div id="audio" class="audio"></div>
	<script>
	const fileEl = document.getElementById('file')
	const delayEl = document.getElementById('delay')
	const audioEl = document.getElementById('audio')
	const lengthEl = document.getElementById('length')
	let timer = null

	lengthEl.onchange = delayEl.onchange = fileEl.onchange = () => {
	const file = fileEl.files[0]
	const delay = delayEl.value \|\| 0
	const reader = new FileReader()
	const length = lengthEl.value

	if (!file) return

	reader.onload = () => {
	const audios = Array.from({ length }, (v, i) => {
	const audio = document.createElement('audio')
	audio.loop = true
	audio.controls = true
	audio.src = reader.result
	audio.id = `audio-${i + 1}`
	audio.controlsList="nodownload"
	audio.volume = 1 - i / length
	// audio.currentTime = Number(delay + (delay * i).toFixed(2))
	console.dir(audio.currentTime)
	return audio
	})
	audioEl.innerHTML = ''
	// while (audioEl.hasChildNodes()) {
	// audioEl.removeChild(audioEl.lastChild)
	// }
	if (timer) {
	clearTimeout(timer)
	}
	for (const [i, el] of audios.entries()) {
	timer = setTimeout(() => {
	audioEl.appendChild(el)
	el.play()
	}, delay * 1000 * i)
	}
	}
	reader.readAsDataURL(file)
	}
	</script>
	</body>
	</html>