JS特效第55弹：canvas音谱可视化mp3音乐播放器代码

马coder

于 2023-12-30 11:30:00 发布

阅读量622

点赞数 12

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38343072/article/details/134939201

版权

html5 canvas通过AudioContext对获取audio标签播放的音域和音高，调用js绘制相应高度的矩形或线条，先来看看效果：

一部分关键的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	.img{
		animation:rotatez 7s;
		animation-timing-function:linear;
		animation-iteration-count:infinite;
	}
	@keyframes rotatez{
		0%{transform:rotateZ(0deg);}
        100%{transform:rotateZ(360deg);}
	}
	table td{
       border:1px solid #fff;
       text-align:center;
       font-size:30px;
       color:#fff;
	}
</style>
<title>自己做特效</title>
</head>
<body style="background-color:#fff;">
    <script type="text/javascript" src="index.js">
	</script>
	<canvas id="canvas" style="border:0px solid #f00">
	</canvas>
	<div id='crt' style="width:100%; height:150px; border:0px solid #fff; background-color:#099; text-align:center;">
    
	  <table cellspacing="0" style="width:100%;  height:100%; border:1px solid #fff;">
        <td style="width:25%;">
         <table id="msclist" class="msclist" style="width:100%; height:100%; background-color:#000;">
           
         </table>
        </td>
        <td style="width:50%;">
          <div onClick="last()" style="width:30%; cursor:pointer; line-height:130px; background-color:#63F; margin-left:3%; height:100%; float:left;">
          上一曲
          
          </div>
          <div onClick="run()" style="width:30%; cursor:pointer; background-color:#63F; margin-left:2%; height:100%; float:left;">
            <img id="img" src="img/friend.jpg" style=" margin-top:10px; height:120px; width:auto; border-radius:100%;" />
            
          </div>
          <div onClick="next()" style="width:30%; cursor:pointer; line-height:130px; background-color:#63F; margin-left:2%; height:100%; float:left;">
          下一曲
          </div>
        </td>
        <td style="width:25%;">
         <form oninput="cgcolor()">
          <table style="width:100%; height:100%; ">
           <tr>
            <td style="cursor:pointer;  background-color:#09C;" onClick="canvascg(1)">球状</td>
            <td style="cursor:pointer; background-color:#09C;" onClick="canvascg(2)">柱形</td>
            <td style="cursor:pointer; background-color:#09C;" onClick="canvascg(3)">线条</td>
           </tr>
           <!--<tr>
           
            <td id="td1" style="cursor:pointer; font-size:18px; background-color:#09C;">开始<br /><input type="color" id='startc' /></td>
            
            <td style="cursor:pointer; font-size:18px; background-color:#09C;">中点<br /><input type="color" id='contentc' /></td>
            <td style="cursor:pointer; font-size:18px; background-color:#09C;">末端<br /><input type="color" id='endc' /></td>
            
           </tr>-->
          </table>
           </form>
        </td>
      </table>
     
	</div>
    <audio id="audio"  style=" ">
	</audio>
  
</body>
</html>

全部代码：canvas音谱可视化mp3音乐播放器代码.zip