<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./audio.css">
<style>
html,
body {
background: #fff;
}
.yAudio {
width: 820px;
margin: 100px auto;
}
.toLus {
display: block;
position: absolute;
top: 0;
left: 0;
}
.toLus img {
display: block;
width: 40px;
height: 40px;
}
.github {
display: block;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="yAudio" id="yAudio1"></div>
<div class="yAudio" id="yAudio2"></div>
<script src="./audio.js"></script>
<script>
fetch('https://api.i-meto.com/meting/api?server=netease&type=playlist&id=697421859').then(async response => {
const audio = await response.json();
new YAudio({
element: document.querySelector('#yAudio1'),
audio: audio
})
});
fetch('https://www.vvhan.com/usr/themes/Joe/NeteaseCloudMusicApi.php?id=28403111').then(async response => {
const audio = await response.json();
new YAudio({
element: document.querySelector('#yAudio2'),
audio: audio
})
});
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
用canvas实现可视化波形音乐播放器,canvas音频播放器
共3个文件
html:1个
js:1个
css:1个
需积分: 0 0 下载量 18 浏览量
2023-03-18
14:04:35
上传
评论
收藏 10KB RAR 举报
温馨提示
一个 canvas 可视化波形音频播放器。 一直想找个机会写一个播放器的功能,这次终于可以如愿实现了,前后花了几周的时间,主要是自己本身也有工作,也确实有点懒散,写一下放一下,磕磕绊绊的总算是做了自己满意的样子。 想做播放器是很早的想法,但没有找到好看合适的界面设计,就这个界面还是我翻来国外的音乐网站 soundcloud 仿的,不算很一样,用起来也不差多少,觉得里面的评论功能有点厉害,对着界面就搞了一下。说道里面的波形处理,是用的 canvas 画出来的线条,原理其实也很简单,就是获取音频的流文件,处理里面的 pcm 数据,在计算一下得到柱状的高度,做两个反差的效果,具体的可以看代码写法。 功能 插件支持两种模式,歌单和单曲的模式。 歌单模式:就是一个列表,可以轮训播放。 单曲模式:就是单首歌曲,可以提交评论操作,歌曲时间滚动到节点显示评论,如果需要评论保存,那就需要对接处理。 element: null, // 播放器的元素 autoplay: false, // 是否自动播放 audio:
资源推荐
资源详情
资源评论
收起资源包目录
yAudio.rar (3个子文件)
audio.css 10KB
audio.js 32KB
index.html 1KB
共 3 条
- 1
资源评论
龙华军
- 粉丝: 18
- 资源: 86
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功