在音频元素内选择

Posted 2023-02-25

【中文标题】在音频元素内选择

【英文标题】：Select within audio element

【发布时间】：2017-05-26 17:52:10

【问题描述】：

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

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

例如在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>

【问题讨论】：

你可以使用 CSS 做任何你想做的事情。

请给我们一个例子，以便我们看看你的尝试。

好的，我会更新我的问题

请看这个codepen。这是否符合您正在尝试做的事情？

【参考方案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 标签内。它不会渲染。