利用MUI提供的控件,编写js和html的代码来实现一个移动端的音乐播放器,要求具有切换歌曲、播放、暂停、显示当前播放曲目等基本功能,不能使用自带控件。
时间: 2023-05-30 17:04:25 浏览: 147
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐播放器</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css">
<script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
</head>
<body>
<div class="mui-content">
<h1 class="mui-text-center">音乐播放器</h1>
<div class="mui-card">
<div class="mui-card-header mui-text-center">
<p id="songName">歌曲名称</p>
</div>
<div class="mui-card-content">
<audio id="myAudio" src="http://music.163.com/song/media/outer/url?id=1410569789.mp3"></audio>
</div>
<div class="mui-card-footer">
<div class="mui-input-row">
<button id="playBtn" class="mui-btn mui-btn-block mui-btn-success">播放</button>
<button id="pauseBtn" class="mui-btn mui-btn-block mui-btn-warning">暂停</button>
<button id="prevBtn" class="mui-btn mui-btn-block mui-btn-primary">上一首</button>
<button id="nextBtn" class="mui-btn mui-btn-block mui-btn-primary">下一首</button>
</div>
</div>
</div>
</div>
<script>
mui.init();
var songs = [
{
name: '红昭愿',
url: 'http://music.163.com/song/media/outer/url?id=1410569789.mp3'
},
{
name: '离人愁',
url: 'http://music.163.com/song/media/outer/url?id=1313354324.mp3'
},
{
name: '山楂树之恋',
url: 'http://music.163.com/song/media/outer/url?id=186016.mp3'
},
{
name: '起风了',
url: 'http://music.163.com/song/media/outer/url?id=1293886117.mp3'
}
];
var songIndex = 0;
var myAudio = document.getElementById('myAudio');
var songName = document.getElementById('songName');
var playBtn = document.getElementById('playBtn');
var pauseBtn = document.getElementById('pauseBtn');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
function init() {
songName.innerHTML = songs[songIndex].name;
myAudio.src = songs[songIndex].url;
myAudio.load();
}
init();
playBtn.addEventListener('click', function() {
myAudio.play();
});
pauseBtn.addEventListener('click', function() {
myAudio.pause();
});
prevBtn.addEventListener('click', function() {
songIndex--;
if (songIndex < 0) {
songIndex = songs.length - 1;
}
songName.innerHTML = songs[songIndex].name;
myAudio.src = songs[songIndex].url;
myAudio.load();
myAudio.play();
});
nextBtn.addEventListener('click', function() {
songIndex++;
if (songIndex >= songs.length) {
songIndex = 0;
}
songName.innerHTML = songs[songIndex].name;
myAudio.src = songs[songIndex].url;
myAudio.load();
myAudio.play();
});
</script>
</body>
</html>