Latest ads

Electronics
Vehicles
Property
Search

JavaScript Player

Lasanthajn

Lasanthajn

Well-known member
  • Nov 26, 2007
    1,876
    1,912
    113
    ටිකක් නෙට් එකේ ඇවිදිනකොට හිතුන මට ඕන විදියට Audio Player එකක් හදන්න ඒනෙ කියල.. ඇත්තටම අපිට ඕනෙ දැන ගන්න Photoshop විතරයි. ඉතුරු ටිකි html5, css, JavaScript වලින් කරගන්න පුළුවන්

    Capture.jpg


    HTML: 
    <div class="audio_player" id="ap">
<!--   <audio></audio> -->
  <div class="player_body">
    <div class="hamburger-menu">
      <div class="bar"></div>
    </div>
    
    <div class="nav_menu" id="navMenu">
      <div class="nav_list">
        <div class="nav_item">
          <p>Developed by:</p>
          <a href="https://www.linkedin.com/in/vladislav-kubyshkin-b15b18128" target="_blank">Vladislav Kubyshkin</a>
        </div>
        <div class="nav_item">
          <p>Template designed by:</p>
          <a href="https://dribbble.com/rezashintia" target="_blank">Reza Shintia Dewi</a>
        </div>
      </div>
    </div>
    
    <div class="player_playlist" id="pl_playlist">
      <ul class="player_playlist_list"></ul>
    </div>
    
    <div class="player_fade"></div>
    <div class="player_content">
      <div class="player_header">
        <div class="container-fluid">
          <div class="row">
            <div class="col-xs-2">
              <div class="playlist_btn"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div>
            </div>
            <div class="col-xs-8">
              <div class="header_name text-center" id="nowPlay">
                <span id="npAction">PAUSED...</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="album_wrap">
        <div class="default_cover"><div class="cover"></div></div>
      </div>
      
      <div class="song_playing text-center">
        <div class="title_block"><span id="title" title="">Hi Dribbble!</span></div>
        <div class="artist_block"><span id="artist" title="">Reza Shintia Dewi</span></div>
      </div>
      
      <div class="timeline_wrap">
<!--    <div class="timeline">
          <div class="line_played"></div>
          <div class="full_line"></div>
        </div> -->
        <div class='timeline'>
          <div class='full_line'></div>
          <div class="line_preload"></div>
          <div class='line_played'>
            <span class='timeline_pointer'></span>
          </div>
        </div>

        <div class="time_of_song">
          <div class="container-fluid">
            <div class="row">
              <div class="col-xs-2">
                <span class="time_played">0:00</span>
              </div>
              <div class="col-xs-2 col-xs-offset-8">
                <span class="full_time">0:00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="player_btns">
        <div class="container-fluid">
          <div class="row">
            <div class="col-xs-2">
              <div class="random_btn text-center btn_shadow" id="random"><span class="glyphicon glyphicon-random" aria-hidden="true"></span></div>
            </div>
            
            <div class="col-xs-2">
              <div class="prev_btn text-center btn_shadow" id="btnPrev" data-action='prev'><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></div>
            </div>
            
            <div class="col-xs-3">
              <div class="play_btn text-center" id="play" data-action='play'>
                <span class="glyphicon glyphicon-play" id="play_circle" aria-hidden="true"></span>
              </div>
            </div>
            
            <div class="col-xs-2">
              <div class="next_btn text-center btn_shadow" id="btnNext" data-action='next'><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></div>
            </div>
            
            <div class="col-xs-2">
              <div class="repeat_btn text-center btn_shadow" id="repeat"><span class="glyphicon glyphicon-retweet" aria-hidden="true"></span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="waves">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275 223.7" style="enable-background:new 0 0 275 223.7;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:url(#SVGID_1_);}
          .st1{fill:url(#SVGID_2_);}
          .st2{fill:url(#SVGID_3_);}
        </style>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="137.5" y1="-19.8534" x2="137.5" y2="92.9036">
          <stop  offset="0.104" style="stop-color:#FF8FCF;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#FF8FCF;stop-opacity:0.7"/>
        </linearGradient>
        <path class="st0" d="M258.3,68c-21.8-6.7-21.5-47.8-31-48.3c-15.4-0.9-26.7,107.3-47.7,108c-16.6,0.6-26.8-67-46.7-66.3
          c-14.7,0.5-20,37.9-31.3,37.3c-18.2-0.9-24-98.7-36-98.7C54.7,0,49.5,82,36,82.3C25.4,82.6,18,32.1,8.3,33C3.2,33.5,0.7,47.8,0,51.7
          v172h275v-158C270.3,67.9,265,70,258.3,68z"/>
        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="137.5" y1="26.8924" x2="137.5" y2="179.8649">
          <stop  offset="0" style="stop-color:#33D4FA;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#33D4FA;stop-opacity:0.7"/>
        </linearGradient>
        <path class="st1" d="M261.8,94.7c-19.3,3.2-28.2-24.1-48.5-24.3c-22.5-0.2-29.2,33.3-47.3,32.2c-24.6-1.5-32.5-64.7-52-64.2
          C98.1,38.8,92.6,81,77.3,80.8c-16.6-0.2-25.5-50.3-36-49C29.8,33.3,29.8,95.4,17,96.5c-4.7,0.4-7-7.8-17-9.8v137h275V87.4
          C271.7,90.5,267.5,93.7,261.8,94.7z"/>
        <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="137.5" y1="6.0051" x2="137.5" y2="144.9296">
          <stop  offset="3.960396e-02" style="stop-color:#33D4FA;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#00B2FA"/>
        </linearGradient>
        <path class="st2" d="M275,223.7V87.8c-6.2,4.4-15.4,9.1-26,8.9c-29.2-0.7-36.9-39.1-61.2-38.7c-22.1,0.4-29.1,32.4-46,30.3
          c-22.8-2.8-26.7-63.5-42.2-63.7c-16.5-0.1-25.2,68.9-42,68.5c-13.7-0.3-22.4-46.7-32.5-45c-4.3,0.8-8.1,10.3-10.7,16.8
          C12.3,70.5,11.7,74.4,8,79c-2.7,3.4-5.8,5.4-8,6.7v138H275z"/>
        </svg>
    </div>
  </div>
</div>

<div id="preloader">
  <div id="status">
     <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
  </div>
</div>
     
    • Like
    Reactions: Sry.com
    Lasanthajn

    Lasanthajn

    Well-known member
  • Nov 26, 2007
    1,876
    1,912
    113
    Code: 
    /* preloader */

#preloader {
  position: fixed;
  z-index: 500;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background: rgba(0, 178, 250, 1);
  background-size: cover;
}

#status {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 30px;
  margin: -25px 0 0 -15px;
}

.spinner {
  font-size: 10px;
  width: 50px;
  height: 30px;
  margin: 0 auto;
  text-align: center;
}

.spinner > div {
  display: inline-block;
  width: 6px;
  height: 100%;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
  background-color: #fff;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -.9s;
  animation-delay: -.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -.8s;
  animation-delay: -.8s;
}

@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(.4);
  }
  20% {
    -webkit-transform: scaleY(1.0);
  }
}

@keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(.4);
    transform: scaleY(.4);
  }
  20% {
    -webkit-transform: scaleY(1.0);
    transform: scaleY(1.0);
  }
}


/* ------------------------------------- */

body,
html {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgba(215, 243, 246, 1);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .004);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -khtml-user-select: none;
}

.audio_player {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 18px 0;
}

.player_body {
  position: relative;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 275px;
  height: 490px;
  margin: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .15), 0 15px 35px 0 rgba(0, 105, 92, .5);
}

.waves {
  position: relative;
  z-index: 20;
  top: -220px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.player_content {
  position: relative;
  z-index: 50;
  width: 100%;
  height: 490px;
}

.player_header {
  position: relative;
  z-index: 55;
  padding: 18px 0;
  color: rgba(0, 178, 250, 1);
  background-color: rgba(255, 255, 255, 1);
}

.header_name {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}


/* Hamburger menu */

.hamburger-menu,
.playlist_btn,
.nav_menu {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.hamburger-menu {
  position: absolute;
  z-index: 70;
  top: 18px;
  right: 16px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.nav_menu {
  position: absolute;
  z-index: 70;
  right: -235px;
  width: 235px;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
}

.nav_list {
  position: relative;
}

.nav_item {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.nav_item p {
  font-size: 14px;
  font-weight: 300;
  margin: -1px 0;
  color: rgba(0, 0, 0, .9);
}

.nav_item a {
  font-size: 22px;
  font-weight: 300;
  color: rgba(0, 0, 0, 1);
}

.player_fade {
  -webkit-transition: background .2s ease-in-out;
  transition: background .2s ease-in-out;
  background: rgba(0, 0, 0, 0);
}

.bar,
.bar:after,
.bar:before {
  width: 15px;
  height: 3px;
}

.bar {
  position: relative;
  -webkit-transition: all 0ms 300ms;
  transition: all 0ms 300ms;
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  background: rgba(0, 178, 250, 1);
}

.bar.active {
  background: rgba(0, 178, 250, 0);
}

.bar:before {
  position: absolute;
  bottom: 6px;
  left: 0;
  content: '';
  -webkit-transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  background: rgba(0, 178, 250, 1);
}

.bar:after {
  position: absolute;
  top: 6px;
  left: 0;
  content: '';
  -webkit-transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  background: rgba(0, 178, 250, 1);
}

.bar.active:after {
  top: 0;
  -webkit-transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.bar.active:before {
  bottom: 0;
  -webkit-transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  ;
}


/* ------------------------------------- */

.player_playlist {
  position: absolute;
  z-index: 60;
  top: 490px;
  overflow: scroll;
  overflow-x: hidden;
  width: 275px;
  height: 305px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
  background-color: rgba(255, 255, 255, 1);
}

.player_playlist::-webkit-scrollbar {
  width: 5px !important;
}

.player_playlist::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, .1) !important;
}

.player_playlist::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .3) !important;
}

.player_playlist_list {
  position: relative;
  margin-bottom: 0;
}

.player_playlist_item {
  width: 100%;
  height: 64px;
  padding: 4px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.player_playlist_item:hover {
  background: #e6e6e6;
}

.player_playlist_item:active {
  background: #d2d2d2;
}

.song_block {
  display: inline-block;
  max-width: 200px;
}

.song_block .title_block {
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 3px;
}

.song_block .artist_block {
  font-size: 11px;
}

.song_time {
  font-size: 11px;
  position: relative;
  top: 20px;
  float: right;
  max-width: 34px;
  color: rgba(144, 144, 144, 1);
}

.glyphicon-menu-left {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.album_wrap {
  position: relative;
  z-index: 40;
  top: 0;
  padding: 18px 0 30px 0;
  -webkit-transition: top .3s ease-in-out;
  transition: top .3s ease-in-out;
}

.default_cover {
  width: 150px;
  height: 150px;
  margin-right: auto;
  margin-left: auto;
  background: url(https://s30.postimg.org/shr4aygpt/default_album_art_blue2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 10px 20px -15px rgba(0, 0, 0, .35), 0 22px 40px -15px rgba(0, 0, 0, .20);
}

.cover {
  width: 150px;
  height: 150px;
  margin-right: auto;
  margin-left: auto;
  -webkit-transition: background-image .2s ease-in-out;
  transition: background-image .2s ease-in-out;
  background-image: url('');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.song_playing {
  font-size: 14.5px;
  line-height: 135%;
  position: relative;
  top: 0;
  max-width: 245px;
  height: 113px;
  margin-right: auto;
  margin-left: auto;
  padding: 6px 0 69px 0;
  -webkit-transition: top .5s ease-in-out;
  transition: top .5s ease-in-out;
}

.title_block {
  font-weight: 500;
}

.artist_block {
  font-size: 10.5px;
  color: rgba(144, 144, 144, 1);
}

.title_block,
.artist_block {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#title,
#artist {
  max-width: 225px;
}

.timeline_wrap {
  position: relative;
  position: relative;
  top: 0;
  margin-top: 5px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.line_played {
  position: absolute;
  top: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 1);
}

.line_preload {
  position: absolute;
  top: 4px;
  height: 2px;
  background-color: rgb(0, 129, 181);
}

.timeline {
  width: 100%;
  height: 10px;
  cursor: pointer;
}

.full_line {
  position: absolute;
  top: 4px;
  width: 100%;
  height: 2px;
  -webkit-transition: background-color .2s ease-in-out;
  transition: background-color .2s ease-in-out;
  background-color: rgba(255, 255, 255, .4);
}

.timeline_pointer {
  position: absolute;
  top: 0;
  right: -1px;
  width: 0;
  height: 0;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  border-radius: 50%;
  background: #fff;
}

.timeline:hover .timeline_pointer {
  top: -3px;
  right: -5px;
  width: 10px;
  height: 10px;
}

.time_of_song {
  font-size: 9px;
  padding-top: 7px;
  -webkit-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
  color: rgba(255, 255, 255, 1);
}

.player_btns {
  position: relative;
  z-index: 1;
  top: -5px;
  left: 14px;
  width: 270px;
  padding-top: 33px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  color: rgba(255, 255, 255, 1);
}

.play_btn {
  position: absolute;
  top: -16px;
  left: 8px;
  width: 51px;
  height: 51px;
  color: rgba(0, 178, 250, 1);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}

#play_circle {
  top: 17px;
  left: 1px;
}

.playlist_btn:hover {
  cursor: pointer;
}

.random_btn:hover,
.prev_btn:hover,
.next_btn:hover,
.repeat_btn:hover {
  cursor: pointer;
  /*   color: rgba(0, 47, 62, 1); */
}

.play_btn:hover {
  cursor: pointer;
  /*   background-color: rgba(0, 47, 62, 1); */
}


/* .player .pl-list__eq {
  display: none;
}

.player .pl-list--current {
  color: #fff;
  background: #1ec279;
}

.player .pl-list--current .pl-list__eq {
  display: block;
}

@keyframes eq {
  0% {
    height: 3px;
  }
  50% {
    height: 15px;
  }
  100% {
    height: 3px;
  }
}

.player .eq {
  display: flex;
  width: 20px;
  height: 15px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: flex-end;
}

.player .eq__bar {
  width: 4px;
  background: #fff;
  filter: drop-shadow(0 0 5px #fff);
}

.player .eq__bar:nth-child(2) {
  animation: eq 1.2s ease-in-out infinite 0s;
}

.player .eq__bar:nth-child(4) {
  animation: eq 1.2s ease-in-out infinite .2s;
}

.player .eq__bar:nth-child(1) {
  animation: eq 1.2s ease-in-out infinite .4s;
}

.player .eq__bar:nth-child(3) {
  animation: eq 1.2s ease-in-out infinite .6s;
} */

.waves.active {
  top: -430px;
}

.hamburger-menu.active {
  margin-right: 232px;
}

.playlist_btn.active {
  margin-left: -232px;
}

.nav_menu.active {
  right: 0;
}

.player_fade.active {
  position: absolute;
  z-index: 65;
  width: 275px;
  height: 490px;
  background: rgba(0, 0, 0, .5);
}

.player_playlist_item.active {
  border-bottom-color: #7d7d7d;
  background: #7d7d7d;
}

.player_playlist_item.active * {
  color: #fff;
}

.glyphicon-menu-left.active {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.player_playlist.active {
  top: 185px;
}

.album_wrap.active {
  top: -300px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.song_playing.active {
  top: -300px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.line_preload.active {
  background-color: rgba(0, 0, 0, .15);
}

.timeline_pointer.active {
  background: rgba(0, 178, 250, 1);
}

.timeline_wrap.active,
.player_btns.active {
  top: -305px;
}

.player_btns .btn_shadow {
  width: 20px;
  margin-left: -3px;
  -webkit-transition: text-shadow .2s ease-in-out;
  transition: text-shadow .2s ease-in-out;
}

.player_btns.active .btn_shadow {
  /*   color: rgba(0, 0, 0, 1); */
  text-shadow: 0 2px 7px rgba(0, 0, 0, .19), 0 4px 4px rgba(0, 0, 0, .23);
}

.line_played.active {
  top: 3px;
  background-color: rgba(0, 178, 250, 1);
}

.full_line.active {
  background-color: rgba(0, 178, 250, .4);
}

.time_of_song.active {
  color: rgba(0, 178, 250, 1);
}

.random_btn.active,
.repeat_btn.active,
.player_btns.active .random_btn.btn_shadow.active,
.player_btns.active .repeat_btn.btn_shadow.active {
  color: rgb(222, 255, 180);
  text-shadow: 0 2px 1px rgba(0, 0, 0, .49);
}


/* 
.touch-screen .menu_btn:hover,
.touch-screen .random_btn:hover,
.touch-screen .prev_btn:hover,
.touch-screen .next_btn:hover,
.touch-screen .repeat_btn:hover {
  color: #fff;
}

.touch-screen .play_btn:hover {
  background-color: #fff;
} */
     
    Lasanthajn

    Lasanthajn

    Well-known member
  • Nov 26, 2007
    1,876
    1,912
    113
    එය වැඩේ සම්පූර්ණ කරන්න මට ගියේ මේ උදාහරණය පමණයි ‍
    https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play
    Code: 
    <html>
<body>

<audio id="myAudio">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 

<script>
var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
alert (x.duration);
  x.pause(); 
} 


</script>

</body>
</html>
     

    Similar threads

    AnuradhaRa
    මේ javascript එක කොපි කලාට වැඩ නෑනෙ
    Replies
    8
    Views
    705
    Lakshan-Seram
    Lakshan-Seram
    buddhikakgsl
    C# Websocket for IoT
    Replies
    12
    Views
    1K
    hasithayad
    hasithayad
    tery123
    BOOSTRAP WADDO innawanan podi help ekak denna..
    Replies
    4
    Views
    778
    Idias
    Idias
    PoPkiss
    PHP වැඩ්ඩන්ගෙන් ලොකු උදව්වක් ඕනි..
    Replies
    17
    Views
    1K
    kolavari
    kolavari
    B
    test
    Replies
    0
    Views
    769
    baba2
    B
    Top Bottom