带有播放列表的网页播放器

最新推荐文章于 2021-06-15 11:28:46 发布

小白晒太阳

最新推荐文章于 2021-06-15 11:28:46 发布

阅读量3.5k

点赞数 1

分类专栏：网页设计文章标签： html 音乐播放器

本文链接：https://blog.csdn.net/tjpu_lin/article/details/32731393

版权

这篇博客介绍如何创建一个带有播放列表的网页播放器，利用HTML、jQuery和embed标签，通过列表项的onclick事件触发音乐源的切换，使得用户可以方便地在多个音乐之间切换播放。

摘要由CSDN通过智能技术生成

最近一个学弟又找我，问我带列表的播放器如何写。我大体告诉了一下他思路，用一个列表标签加embed标签，列表促发onclick事件传递其中的innerHTML值给函数，标签里写音乐的名称就行了。但是发现js促发并不好写，src值既是改变也没有变化，于是改用jQuery来写。

具体见例子。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function(){
	$("#li1").click(function(){
		$("#player").empty();
		$("#player").append("<embed src="+"music/"+this.innerHTML+