《传灯(心经版)》 -黄安
<style>
#bigPa { position: relative; left:- 100px; width: 800px; height: 450px; background:#333 url('https://pic.imgdb.cn/item/6226becb5baa1a80abf300a2.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 500px; float: right; column-count:2; color: #eee; font-size: 1em; text-shadow: 1px 1px 1px #111; }
#paDiv { position: relative; left: 10px; top: 10px; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="bigPa">
<div id="paDiv">
<div id="btn-ro">·</div>
<div id="jindu">
<div id="jd-go"></div>
</div>
</div>
</div>
</div>
<script language="javascript">
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
aud.loop = true;
// 音乐地址放在下行引号内
aud.src = "http://www.kumeiwp.com/sub/filestores/2022/03/07/55a90243d00b02a2e5aea58645feea52.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
aud.play();
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
jindu.style.backgroundSize = jd+ "% 8px";
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取父级元素偏移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ // 暂停&播放
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
</script>
歌曲:传灯(心经版)
作词:黄安
作曲:黄安
演唱:黄安
谁人在流泪人心不如水潮来潮往相思已成灰
唐诗三百首篇篇为情愁情爱不重就不生娑婆
一份恩情一份忧愁黑暗中的一个人
谁来燃起一盏灯洗我前尘快我平生永不见黄昏
点起千灯万灯点灯的人要把灯火传给人
点起千灯万灯点灯的人要把灯火传给人
谁人在流泪人心不如水潮来潮往相思已成灰
唐诗三百首篇篇为情愁情爱不重就不生娑婆
一份恩情一份忧愁黑暗中的一个人
谁来燃起一盏灯洗我前尘快我平生永不见黄昏
点起千灯万灯点灯的人要把灯火传给人
点起千灯万灯点灯的人要把灯火传给人
点起千灯万灯点灯的人要把灯火传给人
点起千灯万灯点灯的人要把灯火传给人
观自在菩萨行深般若波罗密多时照见五蕴皆空度一切苦厄舍利子
色不异空空不异色色即是空空即是色受想行识亦复如是
不生不灭不垢不净不增不减是故空中无色无受想行识
无眼耳鼻舌身意无色声香味触法无眼界乃至无意识界无无明亦无无明尽
乃至无老死亦无老死尽无苦集灭道无智亦无得以无所得故
菩提萨埵依般若波罗密多故心无挂碍无挂碍故无有恐怖远离颠倒梦想
究竟涅槃三世诸佛依般若波罗密多故得阿耨多罗三藐三菩提故知般若波罗密多
是大神咒是大明咒是无上咒是无等等咒能除一切苦真实不虚故说般若波罗密多咒
即说咒曰揭谛揭谛波罗揭谛波罗僧揭谛菩提娑婆诃
制作真漂亮,队长好分享,第一次欣赏这歌,好喜欢, 真棒!
{:4_204:}{:4_199:} 大猫咪 发表于 2022-3-8 11:02
制作真漂亮,队长好分享,第一次欣赏这歌,好喜欢, 真棒!
猫猫上午好。你在啊。{:4_171:}{:4_190:} 加林森 发表于 2022-3-8 11:05
猫猫上午好。你在啊。
开会刚结束,上来欣赏下队长分享的经典,真棒,中午好 {:4_204:}{:4_190:} 大猫咪 发表于 2022-3-8 11:07
开会刚结束,上来欣赏下队长分享的经典,真棒,中午好
嗯嗯,给大家传心经。 加林森 发表于 2022-3-8 11:08
嗯嗯,给大家传心经。
非常棒!特别喜欢这样的音乐{:4_187:} 佛教歌曲,不怎么听 大猫咪 发表于 2022-3-8 11:10
非常棒!特别喜欢这样的音乐
这样容易心静。 马黑黑 发表于 2022-3-8 11:11
佛教歌曲,不怎么听
为了心静,听听也不错的。 加林森 发表于 2022-3-8 11:13
为了心静,听听也不错的。
不见得的。心静与否,听不听佛乐没有关系,关键在于自己的内心:内心静,任由世界吵闹。 加林森 发表于 2022-3-8 11:11
这样容易心静。
嗯嗯舒服 {:4_204:} 大猫咪 发表于 2022-3-8 11:17
嗯嗯舒服
是的是的。{:4_190:} 马黑黑 发表于 2022-3-8 11:15
不见得的。心静与否,听不听佛乐没有关系,关键在于自己的内心:内心静,任由世界吵闹。
这个是必须的。 也是第一次挺到这歌呢,好听。队长的帖子做得真漂亮{:4_187:} 加林森 发表于 2022-3-8 11:19
这个是必须的。
那是那是 马黑黑 发表于 2022-3-8 11:45
那是那是
嗯嗯 红影 发表于 2022-3-8 11:24
也是第一次挺到这歌呢,好听。队长的帖子做得真漂亮
谢谢红影支持!{:4_187:} 加林森 发表于 2022-3-8 15:50
谢谢红影支持!
后面还有一段心境的念白呢。 红影 发表于 2022-3-8 16:33
后面还有一段心境的念白呢。
就是,我专门发出来给大家看的。
页:
[1]
2