HTML5可视音画<<想你念你梦中人 - 门丽/大度>>转动的齿轮按钮 - 动画音画 - 花潮论坛

亚伦影音工作室 发表于 2022-12-7 08:43

HTML5可视音画<<想你念你梦中人 - 门丽/大度>>转动的齿轮按钮

本帖最后由亚伦影音工作室于 2022-12-7 08:46 编辑 <br /><br /><style>
#papa { margin: 30px -300px; width: 1200px; height: 600px; background: gray url('https://pic.imgdb.cn/item/638fe023b1fccdcd3659e690.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow:hidden;}
#canv { margin: 0px auto 0; display: block; position: absolute; bottom:0px; left: 0px; cursor: pointer; }
.picBtn {width:200px; height: 120px;border: none;outline: none;position:absolute; left:940px; top: 460px;z-index: 20;background: url('https://pic.imgdb.cn/item/638fd787b1fccdcd36503624.gif')0 0/100% 100%; transition: 0.3s all ease;
</style>

<div id="papa">
<divclass="items "style="text-align: center;position: absolute;top:50px; left:200px;z-index: 4;"><divid="lrcArea"></div></div>

<div style="position: absolute; left:460px; top: 180px; width:300px; opacity: .95;">

<imgsrc="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif" alt="" /></div>

<div style="position: absolute; left:360px; top: -10px; width:100%; height: 100%; opacity: .85;">

<imgsrc="https://pic.imgdb.cn/item/62720a52094754312988cb03.gif" alt="" /></div>
<button id="picBtn" class="picBtn"></button>

<audio id="aud" src="https://p4.t57.cn:8399/2020/zw/3/JSR.m4a" loop="loop" autoplay="autoplay" crossOrigin="anonymous"></audio>
<div class="img_border" ><img id="aplay" style="width: 300px; height: 300px;mask: radial-gradient(transparent 20px,#red 0);-webkit-mask: radial-gradient(transparent 20px,red 0);background: url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f66fe9c5324ad2c35d3d74f093174c41.jpeg)0px 0px/160% 100%; "></div>
<canvas id='canvas' width="1200" height="250"style="position: absolute; left:0px; top: 350px;"></canvas>
</div>
<script language="javascript">
var mu = document.getElementById('aud');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/638fd787b1fccdcd36503624.gif')0 0/100% 100%") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/638fd7d1b1fccdcd3651339d.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
   btn.style.background="url('https://pic.imgdb.cn/item/638fd7d1b1fccdcd3651339d.png')0 0/100% 100%";
})

</script>
<script>
/* *
* audio visualizer with html5 audio element
*
* v0.1.0
*
* licenced under the MIT license
*
* see my related repos:
* - HTML5_Audio_Visualizer https://github.com/wayou/HTML5_Audio_Visualizer
* - 3D_Audio_Spectrum_VIsualizer https://github.com/wayou/3D_Audio_Spectrum_VIsualizer
* - selected https://github.com/wayou/selected
* - MeowmeowPlayer https://github.com/wayou/MeowmeowPlayer
*
* reference: http://www.patrick-wied.at/blog/how-to-create-audio-visualizations-with-javascript-html
*/

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;

window.onload = function() {
var audio = document.getElementById('audio');
var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var audioSrc = ctx.createMediaElementSource(aud);
// we have to connect the MediaElementSource with the analyser
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
// analyser.fftSize = 64;
// frequencyBinCount tells you how many values you'll receive from the analyser
var frequencyData = new Uint8Array(analyser.frequencyBinCount);

// we're ready to receive some data!
var canvas = document.getElementById('canvas'),
   cwidth = canvas.width,
   cheight = canvas.height - 2,
   meterWidth = 10, //width of the meters in the spectrum
   gap = 2, //gap between meters
   capHeight = 2,
   capStyle = '#fff',
   meterNum = 1200 / (10 + 2), //count of the meters
   capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 22, 0, 300);
gradient.addColorStop(1, '#0f0');
gradient.addColorStop(0.4, '#ff0');
gradient.addColorStop(0, '#f00');

// loop
function renderFrame() {
   var array = new Uint8Array(analyser.frequencyBinCount);
   analyser.getByteFrequencyData(array);
   var step = Math.round(array.length / meterNum); //sample limited data from the total array
   ctx.clearRect(0, 0, cwidth, cheight);
   for (var i = 0; i < meterNum; i++) {
         var value = array;
         if (capYPositionArray.length < Math.round(meterNum)) {
            capYPositionArray.push(value);
         };
         ctx.fillStyle = capStyle;
         //draw the cap, with transition effect
         if (value < capYPositionArray) {
            ctx.fillRect(i * 12, cheight - (--capYPositionArray), meterWidth, capHeight);
         } else {
            ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
            capYPositionArray = value;
         };
         ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
         ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
   }
   requestAnimationFrame(renderFrame);
}
renderFrame();
audio.play();
};

</script>

<style>

#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 55px ; padding: 0;list-style: none;}

#lrcArea{width: 980px;

height: 200%;

overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);

display: block;margin: 0px -100px;}

#lrcArea ul{width: 100%;150px;

text-align: center;

padding: 0;

transition: 0.3s all ease;/*一定要加上不然看着突兀*/

margin: 480px 0px;

}

#lrcArea ul li{height: 0px;

line-height: 0px;

font-family:悟空大字库;

font-size: 0px;

color: #000000;

font-weight: normal;

transition: .3s all ease;/*一定要加上不然看着突兀*/

display: block;

margin: 0px auto;}

#lrcArea ul li.cur{font-size: 35px;

font-family:悟空大字库;text-align: center;

color: #FF0000;

font-weight: bold; margin: 0px auto;}

/*mv动画*/

.img_border{display:inline-block;width:300px;height:300px;position: absolute;top:60px; left:750px;z-index: 14;}

.img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }

.z360z{animation:rotating 10s linear infinite;

}@keyframes rotating{

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}

</style>

<style type="text/css">.items{animation: slider 0.26s linear infinite ;}

@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}

50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}

</style>

<script id="lrc" type="text">
想你念你梦中人 - 门丽/大度
词：阿郎
曲：阿郎
编曲：萧全
制作人：亚伦
出品：亚伦影音工作室
代码制作：亚伦
男：
一个人在梦里总是难以入睡
刚要闭上眼仿佛你就在眼前
女：
其实那并不是你只是想你的感觉
我也要与你梦中相约
男：
一个人在梦里与你依依相偎
刚要睁开眼你却消失在眼前
女：
望着慢慢离去的你那种忧伤的感觉
只好让眼泪留在眼里面
男：
我在梦中想着你
女：
我在梦中念着你
男：
可是现在的你却究竟去了哪里
女：
我愿永远陪着你
男：
我愿永远伴着你
女：
就算只是在梦中相遇我也会愿意
合：
我会天天都想你
把你放在我心里
就当梦中的你是你
女：
一个人在梦里与你依依相偎
刚要睁开眼你却消失在眼前
男：
望着慢慢离去的你那种忧伤的感觉
只好让眼泪留在眼里面
女：
我在梦中想着你
男：
我在梦中念着你
女：
可是现在的你却究竟去了哪里
男：
我愿永远陪着你
女：
我愿永远伴着你
男：
就算只是在梦中相遇我也会愿意
女：
我会天天都想你
男：
把你放在我心里
合：
就当梦中的你是你
就当梦中的你是你

</script>

<script type="text/javascript">

var musicPlayer = function() {

return this.init.apply(this, arguments);

};

musicPlayer.prototype = {

constructor: musicPlayer,

init:function(options) {

if(isEmptyObj(options) || typeof options !== 'object') return;

this.player = options.player;

this.lrc = options.lrc;

this.lrcArea = options.lrcArea;

//用于保存歌词

this.lrcArr = [];

//用于保存时间戳

this.timestamp = [];

//处理歌词

this.handleLrc(this.lrc);

var that = this;

this.player.addEventListener('play', function() {

that.play();

}, false);

this.player.addEventListener('pause',function() {

that.pause();

}, false);

//歌词索引

this.idx = 0;

},

//格式化歌词

handleLrc:function(lrc) {

var re = /(\[.+\])(.+)?/gm,

ul = cEl('ul'),

frag = document.createDocumentFragment(),

tmpArr,i,len;

this.lrcArea.innerHTML = '';

frag.appendChild(ul);

ul.id = 'c';

this.lrcArea.appendChild(frag);

var txt = lrc.replace(re,function(a,b,c) {

return b + (c === undefined ? ' ' : c) + '\n';

});

tmpArr = txt.split('\n');

//处理歌词

for(i = 0,len = tmpArr.length; i < len; i++) {

var item = trim(tmpArr);

if(item.length > 0) {

this.lrcArr.push(item);

}

}

frag = document.createDocumentFragment();

for(i = 0,len = this.lrcArr.length; i < len; i++) {

var li = cEl('li');

if(i === 0) {

li.className = 'cur';

}

li.innerHTML = this.lrcArr.replace(/\[.+\]/i,'')

.replace('','').replace('','');

//处理时间

this.timestamp.push(this.lrcArr.replace(re,function(a,b,c) {

return b;

}).replace('[','').replace(']',''));

frag.appendChild(li);

}

ul.appendChild(frag);

this.li = g('lrcArea').getElementsByTagName('li');

},

//播放

play:function() {

this.stop = false;

var that = this,

player = this.player,

i,len;

this.t = setInterval(function() {

if(that.stop) return;

that.curTime = player.currentTime;

for(i = 0,len = that.timestamp.length - 1; i < len; i++) {

var prevTime = that.formatTimeStamp( that.timestamp ),

nextTime = that.formatTimeStamp( that.timestamp );

//当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词

if( parseFloat( that.curTime ) > prevTime && parseFloat( that.curTime ) < nextTime ) {

that.scrollToLrc(i);

return;

}

}

},300);

},

//暂停

pause:function() {

this.stop = true;

clearInterval(this.t);

},

//格式化时间

formatTimeStamp:function(timestamp) {

var re = /(+):(+)\.(+)/i,

seconds = timestamp.replace(re,function(a,b,c,d) {

return Number(b * 60) + Number(c) + parseFloat('0.'+ d);

});

return seconds;

},

//歌词滚动

scrollToLrc:function(idx) {

var ds = getOffset(this.li).top,

i,len;

//如果歌词索引没有变动，则认为这句没有唱完，不处理

if(this.idx === idx) return;

//否则更新索引值并更新样式和位置

this.idx = idx;

for(i = 0,len = this.li.length; i < len; i++) {

this.li.className = '';

}

this.li.className = 'cur';

this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;

}

};

function g(id) {

return typeof id === 'string' ? document.getElementById(id) : id;

}

function cEl(el) {

return document.createElement(el);

}

function trim(str) {

return str.replace(/(^\s*)|(\s*$)/g, "");

}

function isEmptyObj(o) {

for(var p in o) return false;

return true;

}

function getOffset(el) {

var parent = el.offsetParent,

left = el.offsetLeft,

top = el.offsetTop;

while(parent !== null) {

left += parent.offsetLeft;

top += parent.offsetTop;

parent = parent.offsetParent;

}

return {

left: left,

top: top

};

}

var p = new musicPlayer({

player: g('aud'),

lrc: g('lrc').innerHTML,

lrcArea: g('lrcArea')

});

</script>

<script type="text/javascript">

var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(lrc);

</script>

亚伦影音工作室 发表于 2022-12-7 08:48

本帖最后由亚伦影音工作室于 2022-12-7 08:54 编辑

频谱可能不到1分显示，请耐心等待！用聚合图床上传的图片可能在以后失效!
音乐地址后缀是m4a！经测试这个还可以正常播放!

红影发表于 2022-12-7 09:27

漂亮的音画制作。欣赏亚伦老师好帖{:4_187:}

梦缘发表于 2022-12-7 10:44

很漂亮的频谱，欣赏老师的精彩！{:4_185:}

页: [1]

花潮论坛's Archiver

HTML5可视音画<<想你念你梦中人 - 门丽/大度>>转动的齿轮按钮