为音频播放器创建曲目标题(可在代码笔上找到）

Creating track titles for audio player (found on codepen)

本文关键字：代码 播放器 音频 创建 曲目 标题      更新时间：2023-09-26

我目前正在尝试将此音频播放器用于我的宠物项目。 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;
}

爪哇语

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

我一辈子都不知道如何在播放/暂停按钮旁边显示文本，以便我可以为"曲目"命名。如果有人能帮助我解决这个问题，我将不胜感激。提前感谢您，如果这是一个菜鸟问题，我们深表歉意。

您可以使用

display:inline-block或float:left内联定位元素。例如，使用浮点代码笔：

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

相关文章：