<ul class="Header-controls"><li class="item-search"><div class="Search "><div class="Search-input"><input placeholder="Search Forum" class="FormControl"></div><ul class="Dropdown-menu Search-results"></ul></div></li><li class="item-flags"><div class="ButtonGroup Dropdown dropdown NotificationsDropdown itemCount0"><button title="Flagged Posts" data-toggle="dropdown" class="Dropdown-toggle Button Button--flat"><i class="icon fa fa-fw fa-flag Button-icon"></i><span class="Button-label">Flagged Posts</span></button><div class="Dropdown-menu Dropdown-menu--right"></div></div></li><li class="item-notifications"><div class="ButtonGroup Dropdown dropdown NotificationsDropdown itemCount0"><button title="Notifications" data-toggle="dropdown" class="Dropdown-toggle Button Button--flat"><i class="icon fa fa-fw fa-bell Button-icon"></i></button><div class="Dropdown-menu Dropdown-menu--right"></div></div></li><li class="item-session"><div class="ButtonGroup Dropdown dropdown SessionDropdown itemCount5"><button data-toggle="dropdown" class="Dropdown-toggle Button Button--user Button--flat"><img src="http://gandoncha.ru/assets/avatars/ap6iytn1dpilwixm.jpg" class="Avatar "> <span class="Button-label"><span class="username">wz</span></span></button><ul class="Dropdown-menu dropdown-menu Dropdown-menu--right"><li class="item-profile"><a title="Profile" type="button" class=" hasIcon" active="false" href="/u/wz"><i class="icon fa fa-fw fa-user Button-icon"></i><span class="Button-label">Profile</span></a></li><li class="item-settings"><a title="Settings" type="button" class=" hasIcon" active="false" href="/settings"><i class="icon fa fa-fw fa-cog Button-icon"></i><span class="Button-label">Settings</span></a></li><li class="item-administration"><a title="Administration" type="button" class=" hasIcon" active="false" target="_blank" href="http://gandoncha.ru/admin"><i class="icon fa fa-fw fa-wrench Button-icon"></i><span class="Button-label">Administration</span></a></li><li class="Dropdown-separator"></li><li class="item-logOut"><button title="Log Out" type="button" class=" hasIcon"><i class="icon fa fa-fw fa-sign-out Button-icon"></i><span class="Button-label">Log Out</span></button></li></ul></div></li></ul>
How i can add here play buttom? Where this header template? In DB?
i need this button
<audio id="music" preload="true">
<source src="http://air2.radiorecord.ru:805/rr_320"></audio>
<div id="audioplayer">
<button id="pButton" class="play" onclick="play()"></button>
</div>
CSS:
#audioplayer{
width: 35px;
height: 35px;
margin: 50px auto auto auto;
}
#pButton{
height:30px;
width: 35px;
border: none;
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
float:left;
outline:none;
}
.play{background: url('http://www.alexkatz.me/codepen/images/play.png') ;}
.pause{background: url('http://www.alexkatz.me/codepen/images/pause.png') ;}
JS:
//Play and Pause
function play() {
// start music
if (music.paused) {
music.play();
// remove play, add pause
pButton.className = "";
pButton.className = "pause";
} else { // pause music
music.pause();
// remove pause, add play
pButton.className = "";
pButton.className = "play";
}
}
