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

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

我想不出我的生活如何旁边的播放/暂停按钮显示的文本，以我可以标题为“曲目”。如果有人可以帮我解决这个问题，我将不胜感激。如果这是一个小问题，请提前致谢，并道歉。

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>