maicong · August 3, 2020 07:01
diff --git a/Remix2.html b/Remix2.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>Remix2</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 {
      flex: 3;
    }
    .input .file input {
      padding: 5px;
      background: #eee;
      cursor: pointer;
    }
    .input .btn {
      flex: 1;
    }
    .input button {
      flex: 1;
      width: 100%;
      padding: 5px;
      margin-left: 5px;
      text-align: center;
      box-sizing: border-box;
      border-radius: 5px;
      cursor: pointer;
      outline: 0;
    }
    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="file">
      <span>音频1(Mp3):</span>
      <input id="file1" type="file" accept="audio/mp3">
    </label>
    <label class="file">
      <span>音频2(Mp3):</span>
      <input id="file2" type="file" accept="audio/mp3">
    </label>
    <label class="btn">
      <button id="btn">开始</button>
    </label>
  </div>
  <div id="audio" class="audio"></div>
  <script>
    const fileEl1 = document.getElementById('file1')
    const fileEl2 = document.getElementById('file2')
    const audioEl = document.getElementById('audio')
    const btnEl = document.getElementById('btn')
    let timer = null

    async function renderAudio (files = []) {
      const list = []
      for await (const file of files) {
        if (!file) return
        const reader = new FileReader()
        reader.readAsDataURL(file)
        const data = await new Promise(resolve => {
          reader.onload = () => {
            const audio = document.createElement('audio')
            audio.loop = true
            audio.controls = true
            audio.src = reader.result
            audio.controlsList="nodownload"
            resolve(audio)
          }
        })
        list.push(data)
      }
      return list
    }

    btnEl.onclick = async () => {
      const audios = await renderAudio([
        fileEl1.files[0],
        fileEl2.files[0]
      ])

      if (!audios) return

      audioEl.innerHTML = ''
      if (timer) {
        clearTimeout(timer)
      }
      for (const el of audios) {
        el.onseeking = () => {
          audios.forEach(v => {
            if (!v.seeking) {
              v.pause()
              v.currentTime = el.currentTime
            }
          })
        }
        el.onseeked = () => {
          audios.forEach(v => {
            v.play()
          })
        }
        timer = setTimeout(() => {
          audioEl.appendChild(el)
          el.play()
        }, 0)
      }
    }
  </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>Remix2</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 {
	flex: 3;
	}
	.input .file input {
	padding: 5px;
	background: #eee;
	cursor: pointer;
	}
	.input .btn {
	flex: 1;
	}
	.input button {
	flex: 1;
	width: 100%;
	padding: 5px;
	margin-left: 5px;
	text-align: center;
	box-sizing: border-box;
	border-radius: 5px;
	cursor: pointer;
	outline: 0;
	}
	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="file">
	<span>音频1(Mp3):</span>
	<input id="file1" type="file" accept="audio/mp3">
	</label>
	<label class="file">
	<span>音频2(Mp3):</span>
	<input id="file2" type="file" accept="audio/mp3">
	</label>
	<label class="btn">
	<button id="btn">开始</button>
	</label>
	</div>
	<div id="audio" class="audio"></div>
	<script>
	const fileEl1 = document.getElementById('file1')
	const fileEl2 = document.getElementById('file2')
	const audioEl = document.getElementById('audio')
	const btnEl = document.getElementById('btn')
	let timer = null

	async function renderAudio (files = []) {
	const list = []
	for await (const file of files) {
	if (!file) return
	const reader = new FileReader()
	reader.readAsDataURL(file)
	const data = await new Promise(resolve => {
	reader.onload = () => {
	const audio = document.createElement('audio')
	audio.loop = true
	audio.controls = true
	audio.src = reader.result
	audio.controlsList="nodownload"
	resolve(audio)
	}
	})
	list.push(data)
	}
	return list
	}

	btnEl.onclick = async () => {
	const audios = await renderAudio([
	fileEl1.files[0],
	fileEl2.files[0]
	])

	if (!audios) return

	audioEl.innerHTML = ''
	if (timer) {
	clearTimeout(timer)
	}
	for (const el of audios) {
	el.onseeking = () => {
	audios.forEach(v => {
	if (!v.seeking) {
	v.pause()
	v.currentTime = el.currentTime
	}
	})
	}
	el.onseeked = () => {
	audios.forEach(v => {
	v.play()
	})
	}
	timer = setTimeout(() => {
	audioEl.appendChild(el)
	el.play()
	}, 0)
	}
	}
	</script>
	</body>
	</html>