写一个搜索歌曲免费在线听的小程序前端源码,只要前端
时间: 2024-03-12 07:43:25 浏览: 14
好的,以下是一个简单的搜索歌曲免费在线听的小程序前端源码:
```html
<!DOCTYPE html>
<html>
<head>
<title>搜歌免费在线听</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<style>
body {
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
input[type="text"] {
width: 80%;
height: 40px;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
outline: none;
margin-bottom: 20px;
}
input[type="submit"] {
width: 150px;
height: 40px;
background-color: #ff6600;
color: #fff;
border: none;
border-radius: 20px;
font-size: 18px;
cursor: pointer;
}
.search-results {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
.search-results li {
list-style: none;
margin-bottom: 10px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
padding: 10px;
width: 80%;
display: flex;
justify-content: space-between;
align-items: center;
}
.search-results li:hover {
background-color: #f2f2f2;
}
.song-name {
font-size: 18px;
font-weight: bold;
margin-right: 10px;
}
.artist {
font-size: 16px;
color: #666;
margin-right: 10px;
}
.album {
font-size: 16px;
color: #666;
margin-right: 10px;
}
.play-btn {
background-color: #ff6600;
color: #fff;
border: none;
border-radius: 20px;
font-size: 16px;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>搜歌免费在线听</h1>
<form>
<input type="text" id="search-input" placeholder="请输入歌曲名或歌手名">
<input type="submit" value="搜索">
</form>
<div class="search-results">
<!-- 搜索结果将会在这里显示 -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('form').submit(function(e) {
e.preventDefault();
var keyword = $('#search-input').val();
if (keyword.trim() === '') {
alert('请输入关键字');
return;
}
search(keyword);
});
function search(keyword) {
$.ajax({
url: 'http://localhost:3000/search',
type: 'get',
data: {
keyword: keyword
},
dataType: 'json',
success: function(res) {
console.log(res);
if (res.code === 200) {
var songs = res.data.songs;
var html = '';
for (var i = 0; i < songs.length; i++) {
var song = songs[i];
html += '<li>';
html += '<div>';
html += '<span class="song-name">' + song.name + '</span>';
html += '<span class="artist">' + song.artists[0].name + '</span>';
html += '<span class="album">' + song.album.name + '</span>';
html += '</div>';
html += '<button class="play-btn" data-src="' + song.mp3Url + '">播放</button>';
html += '</li>';
}
$('.search-results').html(html);
} else {
alert('搜索失败');
}
},
error: function(err) {
console.log(err);
alert('搜索失败');
}
});
}
$('.search-results').on('click', '.play-btn', function() {
var src = $(this).data('src');
if (src.trim() === '') {
alert('无法播放');
return;
}
var audio = new Audio();
audio.src = src;
audio.play();
});
});
</script>
</body>
</html>
```
这是一个基于 HTML、CSS 和 jQuery 的小程序前端代码,实现了搜索歌曲和播放歌曲的功能。需要注意的是,这里使用了 jQuery 的 AJAX 方法来调用后端接口进行搜索,并以 JSON 格式返回搜索结果。在实际应用中,需要根据实际情况进行修改和优化。