项目6-3音乐播放器

最新推荐文章于 2023-02-27 00:23:51 发布

全栈的魅力

最新推荐文章于 2023-02-27 00:23:51 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/m0_46444569/article/details/105917470

版权

本文档将引导读者完成一个音乐播放器项目的实现，包括播放、暂停、下一曲、上一曲等功能，涵盖音频处理和用户界面交互的核心技术。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5音乐播放器</title>
    <link rel="stylesheet" href="css/audio.css" media="screen" type="text/css" />
	<link rel="stylesheet" href="css/font-awesome.min.css" media="screen" type="text/css" />
</head>
<body>
  <div id="container">
	<div id="player">
		<!--引入音频源文件-->
		<audio id="audio">
			<source src="audio/陪你度过漫长岁月.mp3" type="audio/mpeg" codecs="mp3"/>
		</audio>
		<!--引入专辑封面图片 -->
		<img src="images/music.jpg">
		<!--制作显示歌词的按钮-->
		<label class="to-lyrics-label" for="to-lyrics"><i class="fa fa-caret-down fa-lg"></i></label>
		<input type="checkbox" id="to-lyrics"><!-- 歌词切换-->
		<div class="cover">
			<div class="controls">
				<button  title="循环播放"><i class="fa fa-retweet fa-lg"></i></button>
				<button  title="上一曲"><i class="fa fa-backward fa-2x"></i></button>
				<button id="play-pause" title="播放" onclick="togglePlayPause()"><i class="fa fa-play fa-3x"></i></button><!--播放/暂停切换按钮-->
				<bu

最低0.47元/天解锁文章

全栈的魅力

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
项目6-3音乐播放器

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>HTML5音乐播放器</title> <link rel="stylesheet" href="css/audio.css" media="screen" type="text/css"...
复制链接

扫一扫