03.05 手動打造一款適合 Python 程序媛的 Html 5 音樂播放器（附源碼）

近期斷斷續續讀了一些 Web Audio API 和 WebRTC API 的文檔，發現了很多好玩的東西，有一種“忽入桃花源”的感覺。

這一款 Html5 音樂播放器，就是基於 Web Audio 技術實現的，原型來自於 Web Audio API 的例子。

為什麼說適合 Python 程序員呢？因為使用者需要理解下面這一行命令：

<code>python -m http.server/<code>

這個命令，將（命令行窗口）當前路徑作為 WebRoot，啟動了一個 Web 服務器，我們可以從瀏覽器訪問 WebRoot 之下的所有文件和文件夾。

這意味著，放在 WebRoot 之下的 html 文件，將以遠程文件而不是本地文件的形式被瀏覽器打開。

我們知道，JavaScript 支持的很多高級功能，比如 Ajax、 Web Audio 等，都必須依賴於服務端才能運行，有了這個快速構建 Web 服務器的手段，將會給啟蒙學習、驗證測試帶來極大的便利。

播放器外觀模擬了一臺錄音機，帶音量調節和雙聲道均衡，純 JavaScript （不是jQuery）實現，完全兼容Firefox/Chrome/Edge 等瀏覽器。

除了樣式表文件，全部代碼只有130行，我已上傳至github，如果有興趣，可自行下載。

使用方法：

在項目所在路徑下打開一個m命令行窗口，運行：python -m http.server

在瀏覽器地址欄輸入：http://127.0.0.1:8000

僅能播放項目所在路徑下music文件夾內的音樂文件

index.html：

<code>


\t
  
  <title>Html5音樂播放器/<title>
  
  
  <link>


  

    

    

      
        
        <datalist>
          <option>
          /<option><option>
        /<option>/<datalist>
        <label>VOL/<label>
        
        <datalist>
          <option>
          /<option><option>
        /<option>/<datalist>
        <label>PAN/<label>
        <button>
          On/Off
        /<button>
      /

      
        <audio>
        <button>
          Play/Pause
        /<button>
      /
    

     

      
    

  


  
/<code>

style.css：

<code>:root {
\t--orange: hsla(32, 100%, 50%, 1);
\t--yellow: hsla(49, 99%, 50%, 1);
\t--lime: hsla(82, 90%, 45%, 1);
\t--green: hsla(127, 81%, 41%, 1);
\t--red: hsla(342, 93%, 53%, 1);
\t--pink: hsla(314, 85%, 45%, 1);
\t--blue: hsla(211, 92%, 52%, 1);
\t--purple: hsla(283, 92%, 44%, 1);
\t--cyan: hsla(195, 98%, 55%, 1);
\t--white: hsla(0, 0%, 95%, 1);
\t--black: hsla(0, 0%, 10%, 1);

\t/* abstract our colours */
\t--boxMain: var(--blue);
\t--boxSecond: var(--cyan);
\t--boxHigh: var(--orange);

\t--border: 1vmin solid var(--black);
\t--borderRad: 2px;


}
* {box-sizing: border-box;}
body {
\tbackground-color: var(--white);
\tpadding: 4vmax;
\tfont-family: system-ui; color: var(--black);
}

#boombox {
\twidth: 82vw; max-width: 800px; margin: 0px auto;
}
@media screen and (max-width: 570px) {
\t#boombox {max-width: 600px;}
} 

.boombox-handle {
\tmargin: 0px 5vw; height: 12vh;
\tbackground:
\t\tvar(--white)
\t\tlinear-gradient(180deg,
\t\t\tvar(--boxHigh) 4vmin,
\t\t\tvar(--black) 4vmin,
\t\t\tvar(--black) 5vmin,
\t\t\tvar(--white) 5vmin)
\t\tno-repeat;
\tborder: var(--border); border-bottom-width: 0px;
\tborder-radius: var(--borderRad);
}
.boombox-body {
\t/*gradient with two circles for speakers*/
/* \tpadding-top: 3vh; */
\tbackground: var(--boxMain) repeat-x bottom left;
\tbackground-image:
\t\tradial-gradient(circle,
\t\t\tvar(--boxMain) 2vmin,
\t\t\tvar(--black) 2vmin,
\t\t\tvar(--black) 3vmin,
\t\t\tvar(--boxSecond) 3vmin,
\t\t\tvar(--boxSecond) 9vmin,
\t\t\tvar(--black) 9vmin,
\t\t\tvar(--black) 9.5vmin,
\t\t\tvar(--boxSecond) 9.5vmin,
\t\t\tvar(--boxSecond) 12vmin,
\t\t\tvar(--black) 12vmin,
\t\t\tvar(--black) 13vmin,
\t\t\tvar(--boxMain) 13vmin);
\tbackground-size: 33.3% 70%;
\tborder: 6px solid var(--black);
\tborder-radius: var(--borderRad);
}
/*small screen with one circle*/
@media screen and (max-width: 570px) {
\t.boombox-body {
\t\tbackground-repeat: no-repeat;
\t\tbackground-position: center top;
\t\tbackground-size: 70% 70%;
\t\tbackground-image:
\t\tradial-gradient(circle,
\t\t\tvar(--boxMain) 4vmin,
\t\t\tvar(--black) 4vmin,
\t\t\tvar(--black) 5vmin,
\t\t\tvar(--boxSecond) 5vmin,
\t\t\tvar(--boxSecond) 21vmin,
\t\t\tvar(--black) 21vmin,
\t\t\tvar(--black) 21.5vmin, 

\t\t\tvar(--boxSecond) 21.5vmin,
\t\t\tvar(--boxSecond) 24vmin,
\t\t\tvar(--black) 24vmin,
\t\t\tvar(--black) 25vmin,
\t\t\tvar(--boxMain) 25vmin);
\t}
}

.boombox-file {
\tpadding: 10px;
}

.master-controls {
\tdisplay: grid;
\tgrid-template-rows: repeat(2, auto);
\tgrid-template-columns: repeat(2, 1fr) 12%;
\t/*name our grid areas so they are more manipulative later*/
\tgrid-template-areas:
\t\t"volin panin power"
\t\t"vollab panlab power";
\tjustify-items: center; align-items: center;
\tpadding: 2vmax;
\tbackground-color: var(--boxSecond);
\tborder-bottom: var(--border);
}
/* change control grid areas for smaller boom box */
@media screen and (max-width: 570px) {
\t.master-controls {
\t\tgrid-gap: 10px;
\t\tgrid-template-columns: 16% 1fr 12%;
\t\tgrid-template-areas:
\t\t\t"vollab volin power"
\t\t\t"panlab panin power";
\t}
}

.master-controls input, .master-controls label {display: block;}
.master-controls input::before, .master-controls input::after {
\tline-height: 5vh; color: var(--black);
}
.master-controls input::before {padding-right: 1vw;}
.master-controls input::after {padding-left: 1vw;}

.control-volume {grid-area: volin;}
.control-volume::before {content: 'min';}
.control-volume::after {content: 'max';}
label[for="volume"] {grid-area: vollab; margin-top: 15px;}
.control-panner {grid-area: panin;}
.control-panner::before {content: 'left';}
.control-panner::after {content: 'right';} 

label[for="panner"] {grid-area: panlab; margin-top: 15px;}
@media screen and (max-width: 570px) {
\tlabel[for="volume"], label[for="panner"] {margin-top: 0px;}
\t.control-volume {margin-bottom: 20px;}
}

.control-power {
\tgrid-area: power; align-self: center;
\twidth: 40px; height: 40px;
\tborder: 3px solid var(--black); border-radius: 20px;
\tcursor: pointer;
}
.control-power span {display: none;}


/* tape area ~~~~~~~~~~~~~~~~~~~~~~ */
.tape {
\tdisplay: grid;
\tgrid-template-rows: 24vh 6vh;
\tgrid-template-columns: repeat(5, 1fr);
\tgrid-template-areas: "tape tape tape tape tape"
\t\t"back rewind play ff next";

\twidth: 26vw; margin: 0px auto;
\tbackground: var(--boxMain) no-repeat center center;
\tbackground-image:
\t\tradial-gradient(circle at 30%,
\t\t\tvar(--boxSecond) 2vh,
\t\t\tvar(--black) 2vh,
\t\t\tvar(--black) 2.5vh,
\t\t\ttransparent 2.5vh),
\t\tradial-gradient(circle at 70%,
\t\t\tvar(--boxSecond) 2vh,
\t\t\tvar(--black) 2vh,
\t\t\tvar(--black) 2.5vh,
\t\t\ttransparent 2.5vh),
\t\tlinear-gradient(180deg,
\t\t\ttransparent 9.1vh,
\t\t\tvar(--black) 9.1vh,
\t\t\tvar(--black) 10.1vh,
\t\t\tvar(--boxHigh) 10.1vh,
\t\t\tvar(--boxHigh) 20vh,
\t\t\tvar(--black) 20vh,
\t\t\tvar(--black) 21vh,
\t\t\ttransparent 21vh),
\t\tradial-gradient(circle at 30%,
\t\t\tvar(--boxHigh) 5vh,
\t\t\tvar(--black) 5vh,
\t\t\tvar(--black) 6vh,
\t\t\ttransparent 6vh), 

\t\tradial-gradient(circle at 70%,
\t\t\tvar(--boxHigh) 5vh,
\t\t\tvar(--black) 5vh,
\t\t\tvar(--black) 6vh,
\t\t\ttransparent 6vh);
\tbackground-size: 100% 100%, 100% 100%, 40% 100%, 100% 100%, 100% 100%;
\tborder: var(--border); border-bottom-width: 0px;
\tborder-radius: var(--borderRad);
\tmax-width: 300px;
}
@media screen and (max-width: 570px) {
\t.tape {width: 80%; margin-top: 30vh;}
}
audio {
\tgrid-area: tape;
}
/*TODO GIVE BUTTONS CLASSES*/
[class^="tape-controls"] {
\tborder: none;
}
[class^="tape-controls"] span {display: none;}
.tape-controls-play {grid-area: play;}

/* ~~~~~~~~~~~~~~~~ All the crazy range styling */
input[type=range] {
  -webkit-appearance: none;
\twidth: 30vw;
  background: transparent;
}
/* set min & max for different screen sizes */
@media screen and (min-width: 1100px) {
\tinput[type=range] {width: 270px;}
}
@media(max-width: 680px) {
\tinput[type=range] {
\t\twidth: 180px;
\t}
}
@media(max-width: 380px) {
\tinput[type=range] {
\t\twidth: 130px;
\t}
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent; 

}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -1vh;
\theight: 4vh; width: 2vw;
\tborder: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  height: 4vh; width: 2vw;
\tborder: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type=range]::-ms-thumb {
  height: 4vh; width: 2vw;
\tborder: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type=range]::-moz-range-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type=range]::-ms-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}

input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--boxMain);
} 


/*~~~~~~~~~~~~~~~~ the play pause & power icons*/
[data-playing] {
\t\tbackground: transparent url('data:image/svg+xml;charset=utf8,') no-repeat center center;
\t\tbackground-size: 60% 60%;
\t\tcursor: pointer;
}
[data-playing]:hover {
\tbackground: transparent url('data:image/svg+xml;charset=utf8,') no-repeat center center;
\tbackground-size: 60% 60%;
}
[data-playing="true"] {
\tbackground: transparent url('data:image/svg+xml;charset=utf8,') no-repeat center center;
\tbackground-size: 60% 60%;
}
[data-playing="true"]:hover {
\t\t\t\tbackground: transparent url('data:image/svg+xml;charset=utf8,') no-repeat center center;
\t\t\tbackground-size: 60% 60%;
}
[data-power] {
\tbackground: var(--boxSecond) url('data:image/svg+xml; charset=utf8,') no-repeat center center;
\tbackground-size: 60% 60%;
}
[data-power]:hover, [data-power="on"] {
\tbackground: var(--boxHigh) url('data:image/svg+xml; charset=utf8,') no-repeat center center;
\tbackground-size: 60% 60%;
}

/<code>

最後小編幫助大家整理了一套python教程，下面展示了部分，希望也能幫助對編程感興趣，想做數據分析，人工智能、爬蟲或者希望從事編程開發的小夥伴，畢竟python工資也還可以，如果能幫到你請點贊、點贊、點贊。

PS：如果你喜歡python，並覺得這篇文章對你有益的話，麻煩多多點贊關注支持！！！！

閱讀更多 程序猿老旭 的文章

關鍵字: 源碼 CSS HTML5