论坛 › 欢乐水吧 › 《A Morning In Cornwall》

加林森 发表于 2022-2-5 17:41

《A Morning In Cornwall》

本帖最后由 加林森 于 2022-2-5 23:30 编辑 <br /><br /><style type="text/css">
/* 父框 */
#mainBox {
/*    margin: auto; 要定位，需将居中设置去掉*/
      position: relative;
      display: flex;
      align-items: center;
      width: 180px;
      height: 30px;
}
/* 按钮、滑块、百分比显示区 */
#mainBox div { color: olive; font-size: 10px; width:40px;}
#mainBox input { outline: none; cursor: pointer; font-size: 10px; }
#mainBox input {
      width: 100px;
      background: red;
}
#mainBox input {
      width: 40px;
      border: 1px solid tan;
      border-radius: 8px;
}
</style>

<!-- 图片总要包装一下，比如做背景图；即使发裸图，对并行元素的定位功夫也要到位 -->
<div style="margin:auto; width:720px; height:480px;background: url('https://pic.imgdb.cn/item/61fe37b92ab3f51d917c82ac.jpg') no-repeat center/cover;">
      <!-- 播放器代码开始 -->
      <div id="mainBox" style="left:10px; top:10px;">
                <input id="mbtn" type="button" value="播放" />
                <input id="bar" type="range" value="0" />
                <div id="per"></div>
      </div>
      <!-- 播放器HTML代码结束 -->
</div>

<script language="javascript">
//各操作变量
var mbtn = document.getElementById('mbtn');
var bar = document.getElementById('bar');
var per = document.getElementById('per');
var aud = document.createElement('audio');
var barGo = true; //进度操作标识
//audio设定
aud.src ="https://www.joy127.com/url/88063.mp3";
aud.addEventListener('canplaythrough', function() { per.innerHTML = "0"; }, false);
aud.addEventListener('ended', iplay(0), true);
aud.addEventListener('timeupdate', barVal, true);
aud.autoplay = "autoplay";
aud.loop = "loop";
mbtn.value = aud.autoplay ? "暂停" : "播放";
// 播放进度
function barVal(){
      if(barGo){ // 若滑块无认为操作：指示播放进度
                var jindu = Math.ceil(100*aud.currentTime/aud.duration);
                bar.value = jindu;
                per.innerHTML = jindu + "%";
      }
}

function iplay(flag){ //播放暂停及按钮状态
      if(flag==1){
                aud.paused ? (aud.play(), mbtn.value="暂停") : (aud.pause(), mbtn.value="播放");
      }else{
                aud.loop ? mbtn.value = "暂停" : mbtn.value = "播放";
      }
}
//滑块鼠标按下：尚未考虑左右键
bar.onmousedown = function() { barGo = false; }
//滑块鼠标松开：尚未考虑左右键
bar.onmouseup=function(){
      var x = bar.value*aud.duration/100;
      aud.currentTime = x;
      barGo = true;
}
//按钮按下
mbtn.onclick = function(){ iplay(1); }

</script>

红影 发表于 2022-2-5 19:21

这个倒是什么效果也没加，就一张图图一个曲子，倒也不错。曲子很好听{:4_187:}

加林森 发表于 2022-2-5 19:24

红影 发表于 2022-2-5 19:21
这个倒是什么效果也没加，就一张图图一个曲子，倒也不错。曲子很好听

嗯嗯，纯音乐。红影晚上好！{:4_187:}

加林森 发表于 2022-2-5 19:32

红影 发表于 2022-2-5 19:21
这个倒是什么效果也没加，就一张图图一个曲子，倒也不错。曲子很好听

我以后会加点另外的。

加林森 发表于 2022-2-5 20:11

@马黑黑 ，我试一试你的播放器代码了。但是，我能不能把播放器代码放进图片里呢？

马黑黑 发表于 2022-2-5 20:14

我这个播放器还很粗糙，未经雕琢

红影 发表于 2022-2-5 20:15

加林森 发表于 2022-2-5 19:32
我以后会加点另外的。

看到加了播放器进度条，真棒。去看了一下代码，顺序有点问题，应该是js放最后的吧{:4_173:}

加林森 发表于 2022-2-5 20:15

马黑黑 发表于 2022-2-5 20:14
我这个播放器还很粗糙，未经雕琢

无所谓的啊，我就是想怎么把播放器放进图片里啊。

马黑黑 发表于 2022-2-5 20:15

需要自动播放的话，把

//aud.autoplay = "autoplay";

前面的注释 // 拿掉

加林森 发表于 2022-2-5 20:17

马黑黑 发表于 2022-2-5 20:15
需要自动播放的话，把

//aud.autoplay = "autoplay";


好的好的

马黑黑 发表于 2022-2-5 20:17

加林森 发表于 2022-2-5 20:15
无所谓的啊，我就是想怎么把播放器放进图片里啊。

它没有位置要求，就像你要说写一句话，你放哪，它就在哪

加林森 发表于 2022-2-5 20:23

马黑黑 发表于 2022-2-5 20:17
它没有位置要求，就像你要说写一句话，你放哪，它就在哪

好的好的

马黑黑 发表于 2022-2-5 20:40

加林森 发表于 2022-2-5 20:23
好的好的

当然，父框的 margin: auto; 是水平居中的，可以去掉后修改

加林森 发表于 2022-2-5 20:40

红影 发表于 2022-2-5 20:15
看到加了播放器进度条，真棒。去看了一下代码，顺序有点问题，应该是js放最后的吧

正在修改

加林森 发表于 2022-2-5 20:42

马黑黑 发表于 2022-2-5 20:40
当然，父框的 margin: auto; 是水平居中的，可以去掉后修改

我慢慢修改吧

马黑黑 发表于 2022-2-5 20:43

加林森 发表于 2022-2-5 20:42
我慢慢修改吧

你这里是放了一张图片，img标签发的，这种情形，就需要定位

加林森 发表于 2022-2-5 20:53

马黑黑 发表于 2022-2-5 20:43
你这里是放了一张图片，img标签发的，这种情形，就需要定位

嗯嗯，谢谢老黑。{:4_190:}

红影 发表于 2022-2-5 20:55

加林森 发表于 2022-2-5 20:40
正在修改

祝队长成功{:4_187:}

加林森 发表于 2022-2-5 20:57

红影 发表于 2022-2-5 20:55
祝队长成功

现在应该算是成功了。

马黑黑 发表于 2022-2-5 22:49

播放器和图片是分离的

查看完整版本: 《A Morning In Cornwall》