<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
background-color: #333
}
</style>
<!-- <script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script> -->
</head>
<body>
<div>hello world</div>
<div class="box"></div>
<!-- <audio controls src="https://chengfengfengwang.github.io/my-guitar-tool/content.mp3"></audio> -->
<!-- <div class="btn">按钮</div> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var d = Date.now();
var audio1 = new Audio();
var audio2 = new Audio();
var audio3 = new Audio();
var objectURLArr = [];
function getAudio(url, audio, index) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var src = window.URL.createObjectURL(xhr.response);
objectURLArr[index] = src;
resolve()
// audio.src = src;
// audio.controls = 'controls';
// document.body.appendChild(audio)
// audio.onload = function () {
// console.log('onload')
// document.body.appendChild(audio)
// }
} else {
console.error(xhr.statusText);
}
}
}
xhr.open('GET', url, true);
xhr.send();
})
}
var btn = document.querySelector('.box');
var url1 = 'http://s.immusician.com/web/h5/media/A_3_do.1fa0ba2b.mp3';
var url3 = 'http://s.immusician.com/web/h5/media/content.47248077.mp3';
var url2 = 'http://s.immusician.com/web/h5/media/content.d1803c07.mp3';
Promise.all([getAudio(url1, audio1, 0), getAudio(url2, audio2, 1), getAudio(url3, audio3, 2)]).then(res => {
console.log('ok');
console.log(Date.now() - d)
var audio = new Audio();
audio.src = objectURLArr[0];
btn.addEventListener('click', () => {
console.log('click');
audio.play();
audio.addEventListener('ended', function () {
audio.src = objectURLArr[1];
audio.play();
})
})
})
</script>
</body>
</html>
移动端连续播放两个音频
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 目的:存在2个vue页面,跳转目的页可以自动播放。 网上百度出来的绝大多数方法是以下2个方法,仍是不对。 错误法1...
- 目录结构说明 首先构建你的docker环境目录大概如下 nginx配置, Dockerfile配置如下 nginx...
- Homebrew Cask 快速上手 Homebrew介绍HomeBrew中文网址 Homebrew 是基于 OS...