通用音乐播放器无图按钮代码分享

马黑黑

32×32的按钮，外观墨绿色+圆角，可根据需要修改。如果要改变按钮尺寸，需要同时调整播放暂停图标的left和top值。使用时可将播放器主体隐藏。其他应注意的事项代码注释里有说明。欢迎交流。

上代码：

1. <style type="text/css">
   
2. 
   
3.   /* CSS代码：class="类名"方式调用 */
   
4. .btnDiv { /* 按钮 */
   
5.         position: relative;
   
6.         width: 32px;
   
7.         height: 32px;
   
8.         border: none;
   
9.         background: darkgreen; /* 按钮颜色 */
   
10.         border-radius: 20%; /* 50%位圆形 */
    
11.         box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
    
12.         cursor: pointer;
    
13. }
    
14. 
    
15. .btnDiv:hover { /* 鼠标滑过 */
    
16.         opacity: .8;
    
17.         box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
    
18. }
    
19. 
    
20. .btnDiv:active { /* 鼠标按下 */
    
21.         opacity: .8;
    
22.         box-shadow: 1px 1px 1px 0px rgba(0,0,0,.9);
    
23. }
    
24. 
    
25. 
    
26. .btn-play { /* 播放图标 */
    
27.         position: absolute;
    
28.         width: 0px;
    
29.         height: 0px;
    
30.         border: 10px solid #000;
    
31.         border-top-color:transparent;
    
32.         border-right-color:transparent;
    
33.         border-bottom-color:transparent;
    
34.         border-left-color:#eee;
    
35.         left: 12px; /* 在按钮中的横向位置 */
    
36.         top: 6px;  /* 在按钮中的纵向位置 */
    
37. }
    
38. 
    
39. .btn-pause {  /* 暂停图标*/
    
40.         position: absolute;
    
41.         display:none;
    
42.         width: 2px;
    
43.         height: 20px;
    
44.         border-right: 4px solid #eee;
    
45.         border-bottom:0px;
    
46.         border-left: 4px solid #eee;
    
47.         left: 11px;  /* 在按钮中的横向位置 */
    
48.         top: 6px;  /* 在按钮中的纵向位置 */
    
49. }
    
50. 
    
51. </style>
    
52. 
    
53. <!-- HTML5代码：id不可改变 -->
    
54. <p><audio id="ymusic" src="音乐地址" controls="controls"></audio></p>
    
55. <div id="btnDiv" class="btnDiv">
    
56.         <div id="btn-play" class="btn-play"></div>
    
57.         <div id="btn-pause" class="btn-pause"></div>
    
58. </div>
    
59. 
    
60. <script language="javascript">
    
61. 
    
62. //JS代码
    
63. var mu = document.getElementById('ymusic');
    
64. var btn = document.getElementById('btnDiv');
    
65. var playbtn = document.getElementById('btn-play');
    
66. var pausebtn = document.getElementById('btn-pause');
    
67. 
    
68. btn.onclick = function(){ iplay(1); } //按钮按下事件：播放或暂停
    
69. mu.addEventListener("ended", function(){ iplay(0); }) //监听播放是否结束
    
70. 
    
71. function iplay(flag){
    
72.         if(flag==1){ // 按钮按下：处理播放与按钮
    
73.                 mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none");
    
74.         }else{ // 播放结束：处理按钮
    
75.                 playbtn.style.display= "block";
    
76.                 pausebtn.style.display = "none";
    
77.         }
    
78. }
    
79. </script>

复制代码

马黑黑

本帖提供的按钮只能控制页内指定id的audio标签，不能跨域控制其他播放器。

audio不支持视频，本帖代码请不要尝试用于视频播放。

小辣椒

黑黑，这个真的是纯技术帖了

小辣椒

按平时小辣椒玩的播放器都是有png按钮样式的，下午看见黑黑的播放器按钮还会有点击按钮有阴影跳动已经很惊奇了，小辣椒以前玩的按钮我找出来。。。稍等

小辣椒

这个按钮不是我自己PS的，但这个也是上下按钮颜色有深浅的，按钮点击下去就会变一下，现在黑黑完全用语句写出来这个效果，真的太佩服了
这个颜色不是很明显，小辣椒自己PS修改一般下面会浅一点点


  

我指按钮停止 打开符号颜色深浅，不是播放器背景颜色


总之就为播放器点击后有阴影效果出来，现在黑黑居然语句写出来了，黑黑太强大了

小辣椒

去学习做一次 谢谢黑黑分享

马黑黑

小辣椒 发表于 2022-1-16 19:07
这个按钮不是我自己PS的，但这个也是上下按钮颜色有深浅的，按钮点击下去就会变一下，现在黑黑完全用 ...

你这两个图可以用CSS的裁剪功能做盒子的底图

马黑黑

小辣椒 发表于 2022-1-16 18:59
黑黑，这个真的是纯技术帖了

不用图片，代码就多一点

红影

这个太厉害了，完全用代码模拟出所有的操作和显示方式，非常赞。

马黑黑

红影 发表于 2022-1-16 19:27
这个太厉害了，完全用代码模拟出所有的操作和显示方式，非常赞。

因为我色盲，色彩方面的修饰，我无从感受，所以弄得不会精细，需要大家去修正一些东东

红影

每个步骤还细心标注了作用。黑黑太厉害了

马黑黑

红影 发表于 2022-1-16 19:29
每个步骤还细心标注了作用。黑黑太厉害了

没标完，标了我觉得大家可能会修改的

小辣椒

马黑黑 发表于 2022-1-16 19:26
你这两个图可以用CSS的裁剪功能做盒子的底图

这个我不会做

马黑黑

小辣椒 发表于 2022-1-16 19:33
这个我不会做

如果你使用过这些图，说明你引用的代码就是切割这些图片的

小辣椒

马黑黑 发表于 2022-1-16 19:27
不用图片，代码就多一点

但我感觉这些代码确实要自己编写一般的人都不会的，只能用黑黑的代码套用了

马黑黑

小辣椒 发表于 2022-1-16 19:34
但我感觉这些代码确实要自己编写一般的人都不会的，只能用黑黑的代码套用了

懂得几个要害就好，这样可以自己修改

小辣椒

马黑黑 发表于 2022-1-16 19:34
如果你使用过这些图，说明你引用的代码就是切割这些图片的

这个就叫切割？

小辣椒

马黑黑 发表于 2022-1-16 19:40
懂得几个要害就好，这样可以自己修改

其实平时我玩播放器就是修改一下，纯编程根本不会

红影

马黑黑 发表于 2022-1-16 19:28
因为我色盲，色彩方面的修饰，我无从感受，所以弄得不会精细，需要大家去修正一些东东

谦虚了，这个色彩就不错的。嗯，框架有了，就可以用黑黑的这个做点稍微的改动，让自己更喜欢了。

红影

马黑黑 发表于 2022-1-16 19:31
没标完，标了我觉得大家可能会修改的

非常细心，很感谢黑黑