网页播放器：带播放列表、本地文件和网络资源支持
<!DOCTYPE html>
<html>
<head>
<title>网页播放器</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 5px;
margin-top: 20px;
}
.playlist {
margin-top: 20px;
padding: 0;
list-style: none;
}
.playlist li {
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.playlist li:hover {
background-color: #f2f2f2;
}
.playlist li.active {
background-color: #5cb85c;
color: #fff;
}
audio {
width: 100%;
margin-top: 20px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #5cb85c;
color: #fff;
border-radius: 5px;
text-decoration: none;
margin-top: 20px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<h1>网页播放器</h1>
<div class='container'>
<ul class='playlist'></ul>
<audio id='audio'></audio>
<div>
<input type='file' id='fileinput'>
<button class='btn' id='add-btn'>添加本地文件</button>
<input type='text' id='urlinput' placeholder='输入网络资源链接'>
<button class='btn' id='play-btn'>播放网络资源</button>
</div>
</div>
<script>
var playlist = document.querySelector('.playlist');
var songs = [
{
title: '歌曲1',
file: 'song1.mp3'
},
{
title: '歌曲2',
file: 'song2.mp3'
},
{
title: '歌曲3',
file: 'song3.mp3'
}
];
var audio = document.querySelector('#audio');
var addBtn = document.querySelector('#add-btn');
var fileInput = document.querySelector('#fileinput');
var playBtn = document.querySelector('#play-btn');
var urlInput = document.querySelector('#urlinput');
var currentSong = null;
<pre><code> // 生成播放列表
function renderPlaylist() {
var html = '';
for (var i = 0; i < songs.length; i++) {
var song = songs[i];
var activeClass = '';
if (song === currentSong) {
activeClass = 'active';
}
html += '<li class=' + activeClass + '>' + song.title + '</li>';
}
playlist.innerHTML = html;
// 绑定播放列表点击事件
var playlistItems = document.querySelectorAll('.playlist li');
for (var i = 0; i < playlistItems.length; i++) {
var playlistItem = playlistItems[i];
playlistItem.addEventListener('click', function() {
var index = Array.prototype.indexOf.call(playlistItems, this);
playSong(songs[index]);
});
}
}
// 播放歌曲
function playSong(song) {
if (currentSong) {
currentSong.active = false;
}
currentSong = song;
currentSong.active = true;
audio.src = currentSong.file;
audio.play();
renderPlaylist();
}
// 添加本地文件
addBtn.addEventListener('click', function() {
fileInput.click();
});
fileInput.addEventListener('change', function() {
var file = this.files[0];
var song = {
title: file.name,
file: URL.createObjectURL(file)
};
songs.push(song);
playSong(song);
});
// 播放网络资源
playBtn.addEventListener('click', function() {
var url = urlInput.value;
var song = {
title: '网络资源',
file: url
};
songs.push(song);
playSong(song);
urlInput.value = '';
});
renderPlaylist();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nVY7 著作权归作者所有。请勿转载和采集!