2017-05-26 108 views
0

我創建了一個select元素來選擇不同的歌曲。音頻元素內選擇

是否可以在audio元素內添加select元素?

例如旁邊的Play Icon或代替Download Icon

enter image description here

或者,如果它是不可能的,我可以採用某種使它看起來像它們是相同的元素?

更新

我試過至今:

<audio> 
    <source src="audio/song1.m4a" type="audio/mpeg"> 
    <select> 
    <option value="Song1">Song 1</option> 
    <option value="Song2">Song 2</option> 
    </select> 
</audio> 

<li class="nav_audio"> 
    <select> 
     <option value="Song1">Song 1</option> 
     <option value="Song2">Song 2</option> 
    </select> 
    <audio controls="" autoplay="" preload="metadata" onloadstart="this.volume=0.25"> 
     <source src="audio/Song2.m4a" type="audio/mpeg"> 
     <select> 
      <option value="Song1">Song 1</option> 
      <option value="Song2">Song 2</option> 
     </select> 
    </audio> 
</li> 
+2

您可以使用CSS來做任何你想做的事情。 – SLaks

+0

請給我們一個例子,以便我們可以看到你的嘗試。 – Matthew

+0

好吧我會更新我的問題 – TheDoctor

回答

1

如果我理解正確的話,你只需要更加熟悉CSS和它的能力。我跟你貼上面我的代碼只是增加了一些CSS的liselect像這樣:

.nav_audio { 
 
    display: inline-block; 
 
    list-style: none; 
 
    padding: 15px; 
 
    border: 1px solid #cccccc; 
 
    background: #cccccc; 
 
} 
 

 
.nav_audio select { 
 
    vertical-align: top; 
 
    padding: 7.5px 15px; 
 
    margin-right: -5px; 
 
    border: none; 
 
    background: #fafafa; 
 
    outline: none; 
 
}
<li class="nav_audio"> 
 
    <select> 
 
    <option value="Song1">Song 1</option> 
 
    <option value="Song2">Song 2</option> 
 
    </select> 
 
    <audio controls="" autoplay="" preload="metadata" onloadstart="this.volume=0.25"> 
 
    <source src="audio/Song2.m4a" type="audio/mpeg"> 
 
    </audio> 
 
</li>

如果這不是你在找什麼,請解釋多一點的詳情。 另外,不,您不能在audio標記內放置select標記。它不會呈現。

+0

謝謝,這就是我想要的 – TheDoctor