2021/5/13
1.今日收获内容
用Android与html进行交互，但在播放时无法播放，期间遇到很多的bug
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
<title>music</title>
<style type="text/css">
/*实现背景图片透明，内容不透明*/
#music {
width: 350px;
height: 500px;
border-radius: 10px;
margin: 20px auto;
position: relative;
background: url("123.jpg") no-repeat;
background-size: cover;
text-align: center;
}
#container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 350px;
height: 500px;
text-align: center;
background:rgba(255,255,255,0.6);
}
/*实现背景图片透明，内容不透明*/
#musicImg {
width: 280px;
height: 280px;
border-radius: 50%;
}
audio {
display: block;
margin: 20px auto;
}
#musicName {
padding-top: 10px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="music">
<div id="container">
<h3 id="musicName">拜托</h3>
<img src="123.jpg" id="musicImg">
<audio src="...." id="musicurl" controls="controls" onerror="musicUrl()"></audio>
</div>
</div>
<center>
<div>
<img src="bofang.png" id="play" style="height: 50px;width: 50px"></button>
<img src="zanting.png" style="height: 50px;width: 50px"id="pause"></button>
<img src="up.png" style="height: 50px;width: 50px" id="prev"></button>
<img src="down.png" style="height: 50px;width: 50px" id="next"></button>
</div>
<script type="text/javascript">
var play = document.getElementById('play'),
pause = document.getElementById('pause'),
prev = document.getElementById('prev'),
next = document.getElementById('next'),
musicName = document.getElementById('musicName'),
musicImg = document.getElementById('musicImg'),
bgImage = document.getElementById('music');
var music = new Array();
var n=new Array();
var picture = new Array();
var data = my.getData();
var f = data;
function imgUrl() {
document.images.musicurl.src = f;
}
n=['血腥爱情故事']
music = ['http://music.163.com/song/media/outer/url?id=31311140.mp3'];
picture=[
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1014426829,3088097618&fm=26&gp=0.jpg',
]
var len = music.length;
var num = -1;
var k=0;
// 播放
play.onclick = function(){
if(audio.paused){
audio.play();
}
}
// 暂停
pause.onclick = function(){
if(audio.played){
audio.pause();
}
}
// 上一首
prev.onclick = function(){
num = (num + len - 1) % len;
k=(k+6-1)%6;
audio.src = music[num];
musicName.innerHTML = n[num];
bgImage.style.backgroundImage = 'url('+picture[k]+')';
musicImg.src = picture[k];
audio.play();
}
// 下一首
next.onclick = function(){
num = (num + 1) % len;
k=(k+1)%6;
audio.src = music[num];
musicName.innerHTML = n[num];
bgImage.style.backgroundImage = 'url('+picture[k]+')';
musicImg.src = picture[k];
audio.play();
}
// 自动切换下一首
audio.addEventListener('ended',function(){
next.onclick();
},false);
</script>
</body>
</html>
2.遇到的问题
这里做了个测试是可以的页面也还行
3.明天目标
