首页 › 音画作品 › 《听闻远方有你》 演唱：刘钧

亦是金 发表于 2025-4-14 14:12

《听闻远方有你》 演唱：刘钧

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1676402">
<div style="
        margin: 50px -60px;
        width: 1220px;
        height: 720px;
        background:url(https://img.51miz.com/preview/element/00/01/40/25/P-1402558-2ECC7212.png)0 0/100%100%,linear-gradient(40deg, #000080, #ff0000, #000000, #00f000);
        overflow: hidden;
        border-radius: 22px;
        border: thick double#88abfa;
        text-align: center;
        z-index: 123;
">

<div class="items" >
<div class="bg">
<div id="aplay">

        <img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWt2yq.jpg" alt=""style="width: 1220px;height: 720px;-webkit-mask-image: radial-gradient(black 20% ,transparent 70%);" />

<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtXm6.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtfmV.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtj0K.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtIkF.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWt4TU.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtblR.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtTfJ.jpg" alt="" />

</div></div>

<div class="BJ">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://upfile.mp3.wf/view.php/bbafe53e170ec3cae97ed28267124654.mp3" controls loop style="width: 1%;
height: 1%;z-index: 1;"></audio>
<div class="btn">
<div id="playpause"
style="
        position:absolute;
        top:-500px;
        left:0px;
        width:1220px;
        height:720px;
        cursor: pointer; /*游标：指针；*/
        z-index: 600;
"/>      
</div>
</div>

      
<divclass="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div></div></div>

<style type="text/css">
.bg {
        width: 1220px;
        height: 720px;
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
}

.cb-slideshowimg{width: 1220px;
height: 720px;
position: absolute;top: 0px;
left: 0px;-webkit-mask-image: radial-gradient(black 20% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;
}
.cb-slideshow #aplay{}
@keyframes round {
15% {
    opacity: 1;
}
20% {
    opacity: 0;
}
}
.cb-slideshow:nth-child(1) {
animation-delay: 42s;
}

.cb-slideshow:nth-child(2) {
animation-delay: 36s;
}

.cb-slideshow:nth-child(3) {
animation-delay: 30s;
}

.cb-slideshow:nth-child(4) {
animation-delay: 24s;
}
.cb-slideshow:nth-child(5) {
animation-delay: 18s;
}

.cb-slideshow:nth-child(6) {
animation-delay: 12s;
}

.cb-slideshow:nth-child(7) {
animation-delay: 6s;
}

.cb-slideshow:nth-child(8) {
animation-delay: 0s;
}
</style>
<style type="text/css">
.BJ{width: 1000px;height: 1000px;
    margin: 0;position: absolute;top:500px; left:0px;z-index: 100;
}
#MusicPlayer{
        width: 1000px;
height: 1000px;
        display: block;
        margin: 0 auto;
}
.btn{
        display: block;
        z-index: 300;
        margin: 0;
}
.lrc{
        width: 960px;
        height: 180px;z-index: 1;
        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;
        position: absolute;
        top:100px;
        left:80px;
        margin: 0 auto;
}
.lrc #ullrc{
        width: 100%;
        padding: 0;
        list-style: none;
        transition: 0.3s all ease;
        margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
        height: 80px;
        line-height: 90px;
        font-family:悟空大字库;
        font-size: 0px;
        color: #000078;
        transform: translate(0%,0%);
        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: 35px;
        color: #ff0000;transform: translate(0%,0%);
        font-weight: bold;
}

.audio{
        z-index: 1;
        bottom: 0;
        opacity: 0;
        transition: all 2s;
        width: 1px;
        height: 1px;
        position: absolute;
        top:0px;
        left:0px;
}
.audio:hover{
        opacity: 0;
}

</style>


<div style="position: relative;width: 500px;height: 50px;top:-750px;LEFT: 0px;z-index: 88;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#f638ef;"><span style="font-family:微软简中圆;"><span style="font-size:32px;">《听闻远方有你》</span></span></span></p></div>

<div style="position: relative;width: 500px;height: 50px;top:-780px;LEFT: 280px;z-index: 99;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#386df6;"><span style="font-family:微软简中圆;"><span style="font-size:20px;"> 演唱：刘 钧</span></span></span></p></div>

<div style="position: relative;width: 500px;height: 50px;top:-220px;LEFT: 960px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>


<style type="text/css">
.items{ z-index: 1540;animation: slider 3s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(100%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(110%)brightness(100%);}}
</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 = 80, lrc_ul_height = 90;
    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 = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
       var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="http://chuangshicdn.data.mvbox.cn/album/22/08/12/22081218443640171058.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://chuangshicdn.data.mvbox.cn/album/22/08/12/22081218423650143637.png";
}, false);
    </script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="cb-slideshow ";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);

</script>



</td></tr></table>

<DIV style="HEIGHT: 50px">

liumang 发表于 2025-4-14 23:50

欣赏亦是金老师分享的好制作，歌曲好听

liumang 发表于 2025-4-14 23:52

图片转换效果很漂亮哦

liumang 发表于 2025-4-14 23:59

感谢老师分享{:5_124:}

查看完整版本: 《听闻远方有你》 演唱：刘钧