Создание mp3-плеера из JavaScript

@Dree · Регистрация: 30.01.2017

Author24 — интернет-сервис помощи студентам

Привет всем!
В интернете полным полно таких плееров. Однако хочется что-то более уникальное с точки зрения дизайна. Решил погуглить и нашел один код, удивительно, простенького плеера. Само собой дизайн тоже простой. Решил изменить дизайн и хоть как-то усовершенствовать. Однако в JavaScript я полный ноль.

HTML5

<div style="background: #545454; width: 20vw; padding: 0.3vw;">
<audio id="player" src="http://transformers.ucoz.net/Transformers/Soundtracks/1_Linkin_Park-What_I-ve_Done.mp3"></audio>
<div>
    <button onclick="document.getElementById('player').play()" class="play"></button>
    <button onclick="document.getElementById('player').pause()" class="pause"></button>
    <button onclick="document.getElementById('player').volume+=0.2" class="volume1">Громкость +</button>
    <button onclick="document.getElementById('player').volume-=0.2" class="volume2">Громкость -</button>
</div>
</div>

CSS

.play {
background: url('http://transformers.ucoz.net/player-play.png') no-repeat;
background-position: center;
height: 2vw;
border: 0;
color: #fff;
cursor: pointer;
outline: none;
}
 
.pause {
background: url('http://transformers.ucoz.net/player-pause-hover.png') no-repeat;;
background-position: center;
height: 2vw;
border: 0;
color: #fff;
cursor: pointer;
outline: none;
}
 
.volume1 {
background: #545454;
height: 2vw;
border: 0.2vw solid #808080;
color: #fff;
}
 
.volume2 {
background: #545454;
height: 2vw;
border: 0.2vw solid #808080;
color: #fff;
}

В общем, заменил кнопки "Play" и "Pause" на картинки. Однако не знаю как сделать так, чтобы при нажатии на "Play" появилась кнопка "Pause", и наоборот. Хотелось бы добавить полоски для перемотки песни и увеличения звука, а также кнопку для скачивания песни. Знаю, что много прошу, но, дамы и господа программисты, помогите!

@MrOnlineCoder · 18.04.2018, 18:48

Dree, если нужно сделать функциональный кастомный плеер, нужно перевести код в отдельный скрипт/файл.

HTML5

<div style="background: #545454; width: 20vw; padding: 0.3vw;">
<audio id="player" src="http://transformers.ucoz.net/Transformers/Soundtracks/1_Linkin_Park-What_I-ve_Done.mp3"></audio>
<div>
    <button onclick="play()" id="playControl"></button>
    <button onclick="pause()" id="pauseControl" style="display: none;"></button>
    <button onclick="changeVolume(0.2)" class="volume1">Громкость +</button>
    <button onclick="changeVolume(-0.2)" class="volume2">Громкость -</button>
</div>
</div>

Javascript

var player = document.getElementById('player');
 
var pauseControl = document.getElementById('pauseControl');
var playControl = document.getElementById('playControl');
 
function play() {
  player.play();
 
  pauseControl.style.display = 'block';
  playControl.style.display = 'none';
}
 
function pause() {
  player.pause();
 
  pauseControl.style.display = 'none';
  playControl.style.display = 'block';
}
 
function changeVolume(delta) {
  player.volume += delta;
}

@Dree · 18.04.2018, 21:14 **[ТС]**

Спасибо!!! А можно регулятор громкости добавить?

Добавлено через 1 час 49 минут
MrOnlineCoder, как сделать регулятор громкости, как у плеера Яндекс.Музыки?

@MrOnlineCoder · 18.04.2018, 22:35

Dree, сделайте просто слайдер, и добавьте слушатель события "изменение" на слайдер и менять громкость в зависимости от значения.

@Опан · 19.04.2018, 11:29

Dree, в моей стране нет доступа к Яндекс.Музыке, можете прикрепить изображение плеера, я попытаюсь зделать громкостометр.

@Dree · 19.04.2018, 13:26 **[ТС]**

Опан,

@Опан · 19.04.2018, 16:31

PHP/HTML

<style>
#polosa{
    background: gold;
    border-radius: 5px;
    width: 7px;
    height: 160px;
    position: absolute;
    left: 15px;
}
#polzunok{
    background: white;
    border-style: solid;
    border-width: 1px;
    border-color: #CCC;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    position: absolute;
    box-shadow: 0px 2px 5px #CCC;
</style>
<audio id=audio src="sound.mp3" controls></audio>
<div id=polosa></div><div id=polzunok></div>
<script>
var audio = document.getElementById("audio");
var polosa = document.getElementById("polosa");
var polzunok = document.getElementById("polzunok");
var myDown = false;
var y = parseInt(window.getComputedStyle(polosa, null).getPropertyValue("top"));
document.onmousedown = function(){myDown = true};
document.onmouseup = function(){myDown = false};
polzunok.onmouseout = function(e){myDown = false};
polzunok.onmousemove = function(e){if(myDown == true)volumesetting(e)};
polosa.onmousedown = function(e){volumesetting(e)};
function volumesetting(e){
    polzunok.style.top = Math.min(140 + y,Math.max(y,e.pageY - 10)) + "px";
    audio.volume = Math.min(1, Math.max(0, (y + 160 - e.pageY) / 160));
}
</script>

Правда, перетаскивание ползунка временами почему-то не слушается. Клик в нужном месте полосы более надёжен.

@Dree 3 / 3 / 1 Регистрация: 30.01.2017 Сообщений: 62
	18.04.2018, 21:14 [ТС]	3
	Спасибо!!! А можно регулятор громкости добавить? Добавлено через 1 час 49 минут MrOnlineCoder, как сделать регулятор громкости, как у плеера Яндекс.Музыки? 0

@MrOnlineCoder Всегда онлайн 1084 / 788 / 295 Регистрация: 07.04.2013 Сообщений: 2,703
	18.04.2018, 22:35	4
	Dree, сделайте просто слайдер, и добавьте слушатель события "изменение" на слайдер и менять громкость в зависимости от значения. 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	19.04.2018, 11:29	5
	Dree, в моей стране нет доступа к Яндекс.Музыке, можете прикрепить изображение плеера, я попытаюсь зделать громкостометр. 0

@Dree 3 / 3 / 1 Регистрация: 30.01.2017 Сообщений: 62
	19.04.2018, 13:26 [ТС]	6
	Опан, 0

	19.04.2018, 16:31

Опции темы

Создание mp3-плеера из JavaScript

Решение