Меняем аудио-плеер

По умолчанию, когда вы вставляете аудио-запись в уроке, появляется стандартный плеер Геткурса — громоздкий и не эстетичный (говоря современным языком — «Аудио-плеер курильщика»)

Но мы с вам его за минуту превратим в аудио-плеер здорового человека.

К счастью, в геткурсе мы можем вставлять html-код — его и задействуем в уроке:

И в созданный блок вставляем код:

<audio controls src="https://fs.getcourse.ru/fileservice/file/download/a/86492/sc/125/h/451a1f15aa35cb09a6cc27213e6715e4.mp3"></audio>

Где внутри, как вы успели уже заметить, стоит ссылка на аудио-файл. Он может быть в вашем хранилище Геткурса, либо где-то еще лежать в интернете. Просто меняете ссылку на свою.

И если вас устраивает, что аудио прижато в левому краю и есть возможность скачать на компьютер запись — то на этом всё.

Но не всем моим клиентам подходило это, а поэтому мне пришлось искать выходы 😐

Покопавшись в интернете, было обнаружено выравнивание плеера. Для это нам с вами нужно дополнить код:

<div align="center">
	<audio controls src="https://fs.getcourse.ru/fileservice/file/download/a/84168/sc/260/h/b152ab03f249805efc8fffb6.mp3"></audio>
</div>

Это дополнительные теги — 1 и 3 строчка. Они и выравнивают. Да, запись через параметры уже редко используется. Но нам важно, что это проще, чем через стили и работает.

Заменив значение align=center на right — вы прижмете плеер к правому краю. Есть еще left — но по умолчанию итак прибивает к левому краю.

С выравниванием разобрались. Теперь скрываем возможность скачать (от опытных и прошаренных пользователей это все равно не поможет)

<div align="center">
<audio controls controlsList="nodownload" src="файл"></audio>
</div>

Как видим появился доп параметр, который скрывает кнопку «скачать». Но контекстное меню все равно работает, и по правой кнопке мышке можно все еще скачать. Поэтому отключаем меню скриптом:

<script type="text/javascript">
$(document).ready(function(){
$('audio').bind('contextmenu',function() { return false; });
});
</script>

И это все — мы с вами добавили выравнивание и отключили скачивание.

Если у вас в уроке одна аудиозапись, то просто добавляйте после кода плеера скрипт. Если предусмотрено несколько — то отдельным блоком поставьте блок с кодом скрипта, а аудиозаписи html-блоками с кодом плеера