亚伦影音工作室 发表于 2024-3-19 12:16

敬往事一杯（合唱版）-侯泽润、魏佳艺

本帖最后由 亚伦影音工作室 于 2024-5-18 17:27 编辑 <br /><br /><style>
#bfqbg {margin: 60px 10px;
        width: 960px;
        height: 120px;
        background:#000 url()no-repeat 0px -200px/cover;
        border-radius:2px;
        position: relative;overflow: hidden;
        z-index: 123;
}
#tp{position:absolute;height:106px;width:106px;bottom:8px; left:8px;}
#tp img{height: 100%;width: 100%;}
#dt{position: absolute;bottom:180px; left:10%;width: 90%;height: 120px;opacity: .4;}
#dt img{height: 500px;width: 100%;}
#mplayer {z-index: 100;position:absolute;bottom:10px; left:80px;width:28px;height:28px;}
#tmsg {position: absolute;z-index: 91;
      font: normal 12px sans-serif;
      color: #ffffff;
      bottom:10px; right:20px}

#prog {position: absolute;z-index: 91;
      width: 730px;
      height: 1%;
      cursor: pointer;
         bottom:14px;left:120px;
color: #cccccc;
}
#bt{ width: 500px; height: 50px;color: #ffffff; position: absolute; left:120px;top:10px;font-size: 16px; font-family:仿宋;z-index: 21;}

</style>

<div id="bfqbg">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/64f84335661c6c8e54f84cc0.gif" /></div>
<img id="tp" src="https://pic.imgdb.cn/item/6574fa4dc458853aefca81ff.jpg" alt="" />
<div id="bt">敬往事一杯（合唱版）-侯泽润、魏佳艺</div>
<div ><img   id="mplayer" src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png" alt="" /></div>
<div id="tmsg">00:00 /00:00</div>
<divid="prog"></div>
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div>
</div>

<audio id="aud" src="https://file.uhsea.com/2405/05680700c9afa5dd24748a9ac29c2e66O0.mp3" loop autoplay></audio>
<style type="text/css">
.lrc{z-index: 20;
    width: 700px;bottom:-18px; left:210px;
    height: 100px;
    overflow: hidden;
    display: block;position: absolute;
    margin: 0 auto;}
.lrc #ullrc{
width: 700px;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:仿宋;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 25px;
    color: #ffffff;}
</style>
<script >
var lrc = `敬往事一杯（合唱版）-侯泽润、魏佳艺
作词：李俊佑
作曲：李俊佑
播放器原创 亚伦
欢迎使用
出品人：亚伦
出品：亚伦影音
男：
愿往事不回头敬余生不将就
这命运无常苦往心里藏
青春如大梦一场
女：
我这一生跌跌撞撞
徒留遗憾半生惆怅
饱经了风霜少年已沧桑
男：
我敬往事这一杯敬命运这一杯
这红尘有谁与我相随
敬爱情这一杯敬人生这一杯
再敬我朋友不醉不归
女：
我敬往事这一杯敬命运这一杯
这世间难得能醉几回
敬尊严这一杯敬生活这一杯
最后敬自己问心无愧
男：
愿往事不回头敬余生不将就
这命运无常苦往心里藏
青春如大梦一场
女：
我这一生跌跌撞撞
徒留遗憾半生惆怅
饱经了风霜少年已沧桑
男：
我敬往事这一杯敬命运这一杯
这红尘有谁与我相随
敬爱情这一杯敬人生这一杯
再敬我朋友不醉不归
女：
我敬往事这一杯敬命运这一杯
这世间难得能醉几回
敬尊严这一杯敬生活这一杯
最后敬自己问心无愧
男：
我敬往事这一杯敬命运这一杯
这红尘有谁与我相随
敬爱情这一杯敬人生这一杯
再敬我朋友不醉不归
女：
我敬往事这一杯敬命运这一杯
这世间难得能醉几回
敬尊严这一杯敬生活这一杯
最后敬自己问心无愧
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 60;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;




(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
var image= document.getElementById("Img");
img.onclick = function() {
        if (aud.paused) {
                aud.play();image.play();
        } else {
                aud.pause();image.stop();
        }
}
aud.addEventListener("play", function (e) {
        img.src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png";
}, false);
aud.addEventListener("pause", function (e) {
        img.src="http://image.hnol.net/c/2022-02/01/23/202202012327333961-5769293.png";
}, false);})();


/*进度条 进度时间*/
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' / ' + toMin(aud.duration);

      });
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
/*结束*/
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("Img");
</script>

admin 发表于 2024-3-19 20:29

歌词发上来高音质发出来{:6_201:}

liumang 发表于 2024-3-19 22:05

这个音乐是128K的，可惜了

liumang 发表于 2024-3-19 22:06

播放器做的漂亮的{:5_150:}{:5_150:}
页: [1]
查看完整版本: 敬往事一杯（合唱版）-侯泽润、魏佳艺