Блог

Главная - Вопросы по программированию - Как написать код javascript для конкретного аудиоплеера

Как написать код javascript для конкретного аудиоплеера

#javascript #html #audio

#javascript #HTML #Аудио

Вопрос:

Я написал этот приведенный ниже код как аудиоплеер, я хочу заставить его работать с помощью javascript, но я не знаю, с чего начать? я хочу иметь опцию воспроизведения и паузы и ничего больше! поскольку я новичок в javascripts, я не знаю, как я могу заставить его работать с этим!

Как я могу написать javascript для этого аудиоплеера?

 #musicplayer {
  position: fixed;
  z-index: 999999;
  bottom: 25px;
  mar&in-left: 20px;
  display: flex;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

#musicplayer&&t;*,
.play&&t;* {
  ali&n-self: center;
  -webkit-ali&n-self: center
}

.roundthin& im& {
  mar&in: 8px;
  width: 15px;
  mar&in-bottom: 200px;
}

.midline {
  width: 0px;
  hei&ht: 3px;
  back&round: #fff;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition-delay: .4s;
  -webkit-transition-delay: .4s;
}

#musicplayer:hover .midline {
  width: 20px;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.play {
  display: flex;
  min-width: 124px;
  hei&ht: 31px;
  text-ali&n: left;
  paddin&: 0px 10px;
  back&round: #fff;
  /* player back&round */
  border-left: 3px solid #16090F;
  /* player border */
  color: #B5A7BA;
  opacity: 0;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition-delay: .4s;
  -webkit-transition-delay: .4s;
  mar&in-top: -200px;
}

.music-controls,
.music-controls&&t;* {
  user-select: none;
  -webkit-user-select: none;
  width: 11px;
  font-size: 11px;
  cursor: pointer;
}

.pausee {
  display: none;
}

.playtext {
  mar&in-left: 8px;
  font-family: courier new;
  font-size: 9px;
}

#musicplayer:hover .play {
  opacity: 1;
  transition-delay: .0s;
  -webkit-transition-delay: .0s;
}  
 <div id="musicplayer" class="box fade-in one"&&t;
  <div class="roundthin&"&&t;
    <im& src="https://www.clipartmax.com/pn&/middle/22-223778_notenschlüssel-clipart-animated-&if-music-notes.pn&"&&t;</div&&t;
  <div class="midline"&&t;</div&&t;
  <div class="play"&&t;
    <div class="music-controls"&&t;
      <div class="playy"&&t;►</div&&t;
      <div class="pausee"&&t;❚❚</div&&t;
    </div&&t;
    <div class="playtext"&&t;Fairytail</div&&t;
  </div&&t;
  <!--play--&&t;

  <audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpe&"&&t;</audio&&t;
</div&&t;

Комментарии:

1. Не могли бы вы, пожалуйста, перейти по этой ссылке , сэр.

Ответ №1:

Вы имеете в виду что-то вроде этого?

 window.addEventListener("load",function() {
  document.querySelector(".playy").addEventListener("click",function() {
    document.&etElementById("tune").play();
    this.style.display="none";
    document.querySelector(".pausee").style.display="block";  
  })
  document.querySelector(".pausee").addEventListener("click",function() {
    document.&etElementById("tune").pause()
    this.style.display="none";
    document.querySelector(".playy").style.display="block";  
  })
})  
 #musicplayer {
  position: fixed;
  z-index: 999999;
  bottom: 25px;
  mar&in-left: 20px;
  display: flex;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

#musicplayer&&t;*,
.play&&t;* {
  ali&n-self: center;
  -webkit-ali&n-self: center
}

.roundthin& im& {
  mar&in: 8px;
  width: 15px;
  mar&in-bottom: 200px;
}

.midline {
  width: 0px;
  hei&ht: 3px;
  back&round: #fff;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition-delay: .4s;
  -webkit-transition-delay: .4s;
}

#musicplayer:hover .midline {
  width: 20px;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.play {
  display: flex;
  min-width: 124px;
  hei&ht: 31px;
  text-ali&n: left;
  paddin&: 0px 10px;
  back&round: #fff;
  /* player back&round */
  border-left: 3px solid #16090F;
  /* player border */
  color: #B5A7BA;
  opacity: 0;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition-delay: .4s;
  -webkit-transition-delay: .4s;
  mar&in-top: -200px;
}

.music-controls,
.music-controls&&t;* {
  user-select: none;
  -webkit-user-select: none;
  width: 11px;
  font-size: 11px;
  cursor: pointer;
}

.pausee {
  display: none;
}

.playtext {
  mar&in-left: 8px;
  font-family: courier new;
  font-size: 9px;
}

#musicplayer:hover .play {
  opacity: 1;
  transition-delay: .0s;
  -webkit-transition-delay: .0s;
}  
 <div id="musicplayer" class="box fade-in one"&&t;
  <div class="roundthin&"&&t;
    <im& src="https://www.clipartmax.com/pn&/middle/22-223778_notenschlüssel-clipart-animated-&if-music-notes.pn&"&&t;</div&&t;
  <div class="midline"&&t;</div&&t;
  <div class="play"&&t;
    <div class="music-controls"&&t;
      <div class="playy"&&t;►</div&&t;
      <div class="pausee"&&t;❚❚</div&&t;
    </div&&t;
    <div class="playtext"&&t;Fairytail</div&&t;
  </div&&t;
  <!--play--&&t;

  <audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpe&"&&t;</audio&&t;
</div&&t;

Комментарии:

1. Да! но кнопка воспроизведения / паузы не меняется! я имею в виду, что я не могу поставить песню на паузу!