在音频元素中选择

Question

我创建了一个select元素来选择不同的歌曲。

是否可以在select元素中添加audio元素？

例如在Play Icon旁边或代替Download Icon。

或者，如果它不可能，我能以某种方式使它看起来像是相同的元素吗？

更新

到目前为止我尝试了什么：

<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>

Answer 1

如果我理解正确，你只需要熟悉CSS及其功能。我使用您在上面发布的代码，我只是向li和select添加了一些CSS，如下所示：

.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>

如果这不是您想要的，请详细解释一下。 此外，您不能将select标记放在audio标记内。它不会渲染。