javascript - 在音频元素中选择

Question

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

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

例如，在播放图标旁边或代替下载图标。

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

更新

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

<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 标签内。它不会呈现。