{"html":"

\n \n

\n\n

\n 0:00\n

\n\n

\n \n

\n\n

","css":".audio.green-audio-player {\n width: 400px;\n min-width: 300px;\n height: 56px;\n box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-left: 24px;\n padding-right: 24px;\n border-radius: 4px;\n user-select: none;\n -webkit-user-select: none;\n background-color: #fff;\n}\n\n.audio.green-audio-player .play-pause-btn {\n cursor: pointer;\n}\n\n.audio.green-audio-player .slider {\n flex-grow: 1;\n background-color: #d8d8d8;\n cursor: pointer;\n position: relative;\n}\n\n.audio.green-audio-player .slider .progress {\n background-color: #44bfa3;\n border-radius: inherit;\n position: absolute;\n pointer-events: none;\n}\n\n.audio.green-audio-player .slider .progress .pin {\n height: 16px;\n width: 16px;\n border-radius: 8px;\n background-color: #44bfa3;\n position: absolute;\n pointer-events: all;\n box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n\n.audio.green-audio-player .controls {\n font-family: \"Roboto\", sans-serif;\n font-size: 16px;\n line-height: 18px;\n color: #55606e;\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n align-items: center;\n margin-left: 24px;\n margin-right: 24px;\n}\n\n.audio.green-audio-player .controls .slider {\n margin-left: 16px;\n margin-right: 16px;\n border-radius: 2px;\n height: 4px;\n}\n\n.audio.green-audio-player .controls .slider .progress {\n width: 0;\n height: 100%;\n}\n\n.audio.green-audio-player .controls .slider .pin {\n right: -8px;\n top: -6px;\n}\n\n.audio.green-audio-player .controls span {\n cursor: default;\n}\n\n.audio.green-audio-player .volume {\n position: relative;\n}\n\n.audio.green-audio-player .volume .volume-btn {\n cursor: pointer;\n}\n\n.audio.green-audio-player .volume .volume-btn .open path {\n fill: #44bfa3;\n}\n\n.audio.green-audio-player .volume .volume-controls {\n width: 30px;\n height: 135px;\n background-color: rgba(0, 0, 0, 0.62);\n border-radius: 7px;\n position: absolute;\n left: -3px;\n bottom: 52px;\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.audio.green-audio-player .volume .volume-controls.hidden {\n display: none;\n}\n\n.audio.green-audio-player .volume .volume-controls .slider {\n margin-top: 12px;\n margin-bottom: 12px;\n width: 6px;\n border-radius: 3px;\n}\n\n.audio.green-audio-player .volume .volume-controls .slider .progress {\n bottom: 0;\n height: 100%;\n width: 6px;\n}\n\n.audio.green-audio-player .volume .volume-controls .slider .progress .pin {\n left: -5px;\n top: -8px;\n}\n"}

purple-badger-78

👁 实时预览

📝 源代码