По умолчанию, когда вы вставляете аудио-запись в уроке, появляется стандартный плеер Геткурса — громоздкий и не эстетичный (говоря современным языком — «Аудио-плеер курильщика»)
Но мы с вам его за минуту превратим в аудио-плеер здорового человека.
К счастью, в геткурсе мы можем вставлять 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-блоками с кодом плеера
