Javascript 为音频播放器创建曲目标题（可在codepen上找到）

我目前正试图将这个音频播放器用于我的一个宠物项目

HTML

CSS

Javascript

$(function() {
     $("audio + a").click(function(e) {
       e.preventDefault();
       var song = $(this).prev('audio').get(0);

       if (song.paused) {
         song.play();
//         $(this).text("❙ ❙");
         $(this).addClass("pause");
         $(this).removeClass("play");
       } 
       else {
         song.pause();
//         $(this).text("▶");
         $(this).addClass("play");
         $(this).removeClass("pause");
       }
     });
   });

---

我一辈子都不知道如何在“播放/暂停”按钮旁边显示文本，以便为“曲目”命名。如果有人能帮我解决这个问题，我会非常感谢你的帮助。提前感谢您，如果这是一个noob问题，请道歉。

您可以使用

display:inline block

或

float:left

来定位内联元素。 例如，使用浮点数：

完整代码：

$（函数（）{
$（“音频+a”）。单击（功能（e）{
e、 预防默认值（）；
var song=$（this.prev（'audio'）.get（0）；
如果（歌曲暂停）{
歌曲。游戏（）；
//$（此）.text（“❙ ❙");
$（此）.addClass（“暂停”）；
$（this.removeClass（“play”）；
} 
否则{
歌曲。暂停（）；
//$（此）.text（“▶");
$（此）.addClass（“播放”）；
$（this.removeClass（“暂停”）；
}
});
})；

正文{
填充：1rem 3rem；
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
}
*，*：之前，*：之后{
框大小：边框框！重要；
}
h1{
字体系列：“HelveticaNeue UltraLight”，“Helvetica Neue Light”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
字号：100；
最大宽度：40雷姆；
保证金：1em自动；
}
代码{
字体系列：Consolas，“比特流Vera Sans Mono”，“Andale Mono”，摩纳哥，“DejaVu Sans Mono”，“Lucida Console”，monospace；
}
p{
最大宽度：40雷姆；
保证金：1rem自动；
}
a{
颜色：#7cc0cb；
宽度：1.5雷姆；
高度：1.5雷姆；
背景：无；
}
跨度{
显示：块；
颜色：#7cc0cb；
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
字号：1rem；
}
在…之前在…之后{
显示：块；
内容：“；
位置：绝对位置；
}
.播放，.暂停{
宽度：1.5雷姆；
高度：1.5雷姆；
显示：块；
明确：两者皆有；
}
.播放：之前{
边框顶部：0.375rem实心透明；
边框底部：0.375rem实心透明；
左边框：0.625rem实心#7cc0cb；
保证金：0.375雷姆0.5雷姆；
}
.暂停：在{
背景：7cc0cb；
保证金：0.4375雷姆0.125雷姆0.4375雷姆；
宽度：0.25雷姆；
高度：0.625雷姆；
}
.暂停：之后{
背景：7cc0cb；
保证金：0.4375雷姆0.125雷姆0.8125雷姆；
宽度：0.25雷姆；
高度：0.625雷姆；
}
.浮动{
浮动：左；
}
.曲目标题{
浮动：左；
线高：26px；
}

超级简单音频播放器
通过使用
audio
元素，后跟
a href=“#”class=“play”/a
，您就有了一个简单的播放/暂停音频播放器


测试

试验

Gvidas，谢谢你帮我的忙。很有效！我非常感谢你的帮助。

@import "compass/css3";


$blue:  rgb(124, 192, 203);


$sans-serif: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

$monospace: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;


$thin: "HelveticaNeue-UltraLight", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;


body {
 padding:  1rem 3rem; 
 font-family:  $sans-serif;
}

*, *:before, *:after {box-sizing:  border-box !important;}


h1 {font-family:  $thin; font-weight:  100; max-width:  40rem; margin:  1em auto;}
code {font-family:  $monospace;}
p {max-width:  40rem; margin:  1rem auto;}

a {
  color:  $blue;
  width: 1.5rem;
  height: 1.5rem;
  background:  none;
}

span {
 display:  block; 
 color:  $blue;
 font-family:  $sans-serif;
 font-size:  1rem;
}






$icon:   $blue;

:before, :after{
  display: block;
  content: "";
  position: absolute;
}


.play, .pause{
  width: 1.5rem;
  height: 1.5rem;
  display:  block;
  clear:  both;
}

.play:before {
  border-top: 0.375rem solid transparent;
  border-bottom: 0.375rem solid transparent;
  border-left: 0.625rem solid $icon;
  margin: 0.375rem 0 0 0.5rem;
}



.pause:before {
  background: $icon;
  margin: 0.4375rem 0.125rem 0 0.4375rem;
  width: 0.25rem;
  height: 0.625rem;
}
.pause:after {
  background: $icon;
  margin: 0.4375rem 0.125rem 0 0.8125rem;
  width: 0.25rem;
  height: 0.625rem;
}

$(function() {
     $("audio + a").click(function(e) {
       e.preventDefault();
       var song = $(this).prev('audio').get(0);

       if (song.paused) {
         song.play();
//         $(this).text("❙ ❙");
         $(this).addClass("pause");
         $(this).removeClass("play");
       } 
       else {
         song.pause();
//         $(this).text("▶");
         $(this).addClass("play");
         $(this).removeClass("pause");
       }
     });
   });

.float {
  float: left;
}
.track-title {
  float: left;
  line-height: 26px;
}