Question

我目前正在尝试将这个音频播放器用于我的宠物项目。 http://codepen.io/AdamBlum/pen/rCLEI

HTML

<h1>Super-Simple Audio Player</h1>
<p>By using an <code>&lt;audio&gt;</code> element followed by an <code>&lt;a href="#" class="play"&gt;&lt;/a&gt;</code>, you have a simple play/pause audio player. </p>

<p>

<audio src="http://www.maninblack.org/demos/WhereDoAllTheJunkiesComeFrom.mp3"></audio>
<a class="play" href="#"></a>

<audio src="http://bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3"></audio>
<a class="play" href="#"></a>

</p>

CSS

@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;
}

的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");
       }
     });
   });

我无法弄清楚我的生活如何在播放/暂停按钮旁边显示文字，以便我可以标题＆＃34;曲目＆＃34;。如果有人能帮我解决这个问题，我将不胜感激。提前谢谢你，如果这是一个noob问题，请道歉。

Answer 1

您可以使用display:inline-block或float:left来排列内联元素。例如。使用浮动codePen：

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

完整代码：

   $(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");
       }
     });
   });

body {
  padding: 1rem 3rem;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

*, *:before, *:after {
  box-sizing: border-box !important;
}

h1 {
  font-family: "HelveticaNeue-UltraLight", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  max-width: 40rem;
  margin: 1em auto;
}

code {
  font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
}

p {
  max-width: 40rem;
  margin: 1rem auto;
}

a {
  color: #7cc0cb;
  width: 1.5rem;
  height: 1.5rem;
  background: none;
}

span {
  display: block;
  color: #7cc0cb;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 1rem;
}

: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 #7cc0cb;
  margin: 0.375rem 0 0 0.5rem;
}

.pause:before {
  background: #7cc0cb;
  margin: 0.4375rem 0.125rem 0 0.4375rem;
  width: 0.25rem;
  height: 0.625rem;
}

.pause:after {
  background: #7cc0cb;
  margin: 0.4375rem 0.125rem 0 0.8125rem;
  width: 0.25rem;
  height: 0.625rem;
}

.float {
  float: left;
}

.track-title {
  float: left;
  line-height: 26px;
}

<h1>Super-Simple Audio Player</h1>
<p>By using an <code>&lt;audio&gt;</code> element followed by an <code>&lt;a href="#" class="play"&gt;&lt;/a&gt;</code>, you have a simple play/pause audio player. </p>

<p>

<audio src="http://www.maninblack.org/demos/WhereDoAllTheJunkiesComeFrom.mp3"></audio>
  <a class="play float" href="#"></a><span class="track-title">Test</span><br/>

<audio src="http://bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3"></audio>
<a class="play float" href="#"></a><span class="track-title">Test</span>

</p>

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

1 个答案: