гостевой

 Здравствуйте меня зовут Борис. Я долгое время читаю Блог Виктории "Шпаргалки Блоггерши" и он меня радует своей простотой.

Код плеера мне достался даром и поэтому я решил поделиться им с людьми так же даром. Потому что в поиске практически не найдешь такой пост который я хочу написать для Вас.

Значит первым делом загружаем аудиофайл на хостинг Гугла Google Disk в формате WAW, MP 3, Windows. Файл может быть и большой но желательно не очень большой так как он начнет сам сбиваться.

Открываем доступ к файлу для всех. Копируем прямую ссылку в блокнот или в поле вставки плеера в блоге. Затем вырезаем из нее индификационный номер файла и вставляем его в поле кода для плеера. Сохраняем.

Копируем номер из прямой ссылки на файл

Вставляем номер файла сюда

Плеер сохранен и воспроизводится

Главное работать с кодом и ссылкой корректно.

Чтобы плеер располагался ровно можно использовать тег <br /> <center />

Так же можно выставить код в разметке страницы HTML по центру. Тогда плеер можно выстанавливать в блоге где нибудь с боку или сверху по центру. Как подскажет вам ваша творческая фантазия.

Так же к плееру можно добавить ширину. Для Этого в команду кода вставляем тег <with>

Ширина плеера

<audio controls style="width: 200px;">

  

Код без расширения

  

<audio controls="controls">

 <source src="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=18ckYBdErJN1BJZvf6-WROfWlgxCL40rc" type="audio/mpeg"></source></audio>

Как вы видите в команду audio controls добавлен тег style

Тогда плеер получится такой или такой...

Тогда плеер можно делать как шире так и уже.

Еще к плееру можно нарисовать свою кнопочку. Для этого к коду добавляем графический тег <img> и кнопочку <button> и вуаля ваш плеер работает персонально у вас в блоге без дополнительной регистрации и ограничения в загрузке. 

Код для аудиоплеера:

1 вариант.

<audio controls="controls">

 <source src="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=1MPQtK50-u-UtjItMlI7jfClM4BFN0H8A" type="audio/mpeg"></source></audio>

<br/>

2 вариант. С картинкой/кнопкой

<img src="https://c.radikal.ru/c19/2009/fd/cf20bc6d0167.png" onclick="if (this.src=='https://c.radikal.ru/c19/2009/fd/cf20bc6d0167.png') {this.src='https://c.radikal.ru/c31/2009/61/98c14bce7608.jpg'; document.getElementById('audio').play() } else { this.src='https://c.radikal.ru/c19/2009/fd/cf20bc6d0167.png'; document.getElementById('audio').pause() };" />

<audio id="audio" src="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=1AGNq6csVLhMZL3fjDErcZ7lCcu5i92Cw" type="audio/mpeg" controls ></audio><button onclick="document.getElementById('audio').play()">Play</button><button onclick="document.getElementById('audio').pause()">Pause</button><button onclick="document.getElementById('audio').volume+=0.1">Vol +</button><button onclick="document.getElementById('audio').volume-=0.1">Vol -</button>

Хостингом для картинки можно использовать как сам блоггер так и сторониие ресурсы например Радикал.ру

Так же вы можете скачать файл напрямую с плеера и изменить звук и скорость воспроизведения. Если конечно же ваш браузер поддерживает расширение аудио.

Другой способ вставки плеера

Плеер во всплывающем окне с кнопкой

Для этого просто копируем код плеера и вставляем в код всплывающего окна и сохраняем. Только гаджет блоггер работает так что если размер окна выставляешь больше то меньше назад его можно сделать только если стереть пустой виджет и создав новый виджет сохранить код с конечной разметкой ширины и высоты окна. В окно можно к плееру вставить что угодно, текст картинку, видео или ссылку.

Я попробовал вставить в окно даже интернет радио из WinAmip

Получилось здорово. В кнопке бегущая строка.

<a href="http://79.120.39.202:8000/pop80" onclick="newMyWindow(this.href); return false;"><button><marquee scrollamount="3" width="100"  height="20"style="font-size: 14pt; ">Слушать... </marquee></button> </a>

 

<script>

function newMyWindow(e) {

  var h = 150,

      w = 250;

  window.open(e, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2));

}

</script>

Как вставить аудиоплеер другим способом я могу подсказать вам в записанном мною видео в Ютубе. Таким же способом можно для блога вставить и картинку и видео и ворд файл, а так же сделать поле для чтения и горячую ссылку для возможности Скачать одним кликом.

Видео https://youtu.be/Zcpx14hLpUo

Спасибо за консолидацию!

ссылки

Я Ссылка.

И я тоже ссылка.

Ещё ссылка. Подведи курсор.

Волнистое подчёркивание ссылки

просто картинки

скамейка на краю леса 

копирование текста

Привет, друзья. Функция копирования текста

Возьмём примерно такой код и попробуем его скопировать кликом на соответствующую кнопку.

<style>
#knopka {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
cursor:pointer;
  border: 1px solid transparent;
  border-radius: 4px
}</style>

Попробуйте скопировать сейчас именно этот текст в буфер обмена, да, да именно этот текст.

Просто нажмите на кнопку

прокрутка

• С чего начать
• Как сделать
• Где взять
• Как реализовать

С чего начать

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est. 

Как сделать

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est.

Где взять

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est.

Как реализовать

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est.

второе сообщение

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut tincidunt turpis. Nullam sit amet sagittis diam, vitae vulputate dui. Cras sapien erat, maximus a egestas vel, porta eget tellus. Pellentesque eget velit consectetur, varius felis vel, pharetra lorem. Curabitur varius massa in elementum rhoncus. Mauris mattis viverra urna id auctor. Cras tincidunt diam orci, eu vestibulum metus egestas non. Ut viverra ultricies massa, vitae sagittis tellus accumsan quis. Nulla quis orci in massa vestibulum ullamcorper. Praesent quis tortor felis. Fusce sit amet molestie tellus. Duis sit amet placerat ipsum. Ut eu nunc tortor. Sed porttitor velit quis eros sollicitudin, ac molestie tortor rhoncus. Nam at mi commodo, facilisis purus nec, finibus ipsum.