<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>音乐播放器</title>
<!--连接css文件-->
<link rel="stylesheet" href="Audio_style.css"/>
</head>
<body>
<div class="view">
<div class="left-side"><!-- 创建左边列表-->
<div class="control">
<div class="o-btns"><!--控制按钮-->
<a href="FileVideo.html"><button id="shift-video">切换视频</button></a>
<button class="add-audio">本地音乐</button>
<input type="file" class="audio-file" id="file" accept="audio/mp3" multiple="true"/>
<button class="add-audio-lyric" id="fileImport">本地歌词</button>
<input type="file" class="audio-lyric-file" id="files" multiple="true"
accept="/.lrc"
onchange="fileImport();"/>
</div>
</div>
<!--创建音乐列表-->
<div class="audio-contain">
<ul class="audio-list"></ul>
</div>
</div>
<!--创建音乐控制控件-->
<audio preload="auto"
style="width: 960px;height: 50px; margin-left: 450px;margin-top:50px"
controls onpause="pauseFunction()"
onPlay="playFunction()"
></audio>
<li></li>
</div>
<!--创建右侧画布控件-->
<div class="cas" id="stage" width="825" height="540">
<div class="bg"></div>
<img id="needle" class="play-needle pause-needle" src="play_needle.png"/>
<div class="disk-cover disk-cover-animation">
<img src="placeholder_disk_play_song.png" width="150" class="album"/>
<img src="play_disc.png" width="200" class="disk-border"/>
</div>
</div>
<!--连接js文件-->
<script src="jquery-3.6.0.min.js"></script>
<script src="Audio_main.js"></script>
</body>
</html>
HTML5实现音视频播放器
版权申诉
5星 · 超过95%的资源 72 浏览量
2021-07-19
09:22:54
上传
评论 3
收藏 130KB ZIP 举报 
音视频播放器.zip （11个子文件） 
Video.css 2KB video_main.js 1KB Audio_style.css 3KB
FileAudio.html 2KB jquery-3.6.0.min.js 87KB
play_needle.png 7KB Audio_main.js 7KB FileVideo.html 1KB play_rdi_bg.png 25KB placeholder_disk_play_song.png 28KB play_disc.png 32KB
- 1
- 2
- 3
前往页