Каким методом можно остановить аудиодорожку

@Scooterok · Регистрация: 13.10.2019

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

Добрый всем.
Собрал из интернета во такой код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
<video id="myVideo" width="320" height="176" controls>
  <source src="mov_bbb.m4a" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
 
<script>
var vid = document.getElementById('myVideo');
vid.currentTime = 20; // Seek to 20 seconds
</script>

В данном случае аудио файл начинает проигрываться с 20-ой секунды.
Как указать, например что закончится должно на 30 секунде, когда файл допустим имеет минуту времени?
Т.е. либо задать временные рамки от и до, либо сбрасывать на начало при достижении 30-ой секунды, ну и крайний вариант остановить автоматически дальнейшее проигрывание.
Необходимо дать возможность прослушать лишь часть файла, и не всегда это нужно сначала, почти всегда в основном нужно задавать параметр от которого начинать проигрывать, в прочем как приведено выше этого я добился

А вот как остановить дальнейшее прослушивание?
Буду благодарен за помощь!

@klopp · 13.10.2019, 15:54

можно так

JavaScript
1
2
3
4
5
6
let timerID = setInterval(() => {
        if(vid.currentTime >= 30) {
            vid.pause();
            timerID = null;
        } 
    }, 500);

только непонятно, зачем вы для звука используете <video>

@Scooterok · 13.10.2019, 16:33 **[ТС]**

Сообщение от klopp

только непонятно, зачем вы для звука используете <video>

исправил, спасибо

@Mr_Sergo · 13.10.2019, 18:14

Scooterok, специально для этого есть событие timeupdate https://codepen.io/pen/?editors=1010

HTML5
1
2
3
<audio id="my-audio" width="320" controls>
    <source src="https://wow.zamimg.com/wowsounds/battleforazeroth/MUS_80_Teldrassil_Battle_Intro_01.ogg">
</audio>

JavaScript
1
2
3
4
5
6
7
let audio = document.querySelector('#my-audio');
 
audio.addEventListener('timeupdate', function() {
    if (audio.currentTime >= 30) {
        audio.pause();
    }
});

https://developer.mozilla.org/... date_event

@Scooterok · 13.10.2019, 19:18 **[ТС]**

to Mr_Sergo,
Спасибо, но тут косяк либо браузера либо я что-то не так делаю.
Допустим есть некий файл 27 сек.
Мне нужно разрешить прослушать с 15 сек по 20 сек.
В Вашем примере почему-то удается прослушать с начала, если перемотать...
А в первом примере от klopp после телодвижение с ползунком вообще страницу перегружать понадобилось, так как ничего не происходила после сдвига влево вправо ползунка, кроме как возвращался он на место.
Может я что-то не так делаю, выше ссылка на тест, большая просьба посмотреть и ткнуть

В идеале вообще скрыть ползунок времени, но это скорее не на форум джаваскриптов, а на другой, по HTML5 audio

Добавлено через 13 минут
т.е. проблема в том что когда перемотаешь на начало, оно не перебрасывает на vidin, и даёт прослушать сначала.
Я правда еще в других браузерах не тестировал...

@Mr_Sergo · 13.10.2019, 19:30

Сообщение от Scooterok

Мне нужно разрешить прослушать с 15 сек по 20 сек.

Что должно происходить по достижении 20 сек.? Перемотка обратно на 15 сек. и снова воспроизведение с 15 по 20сек. (циклично)? Или остановка аудио? Или вообще что-то другое?

@Scooterok · 13.10.2019, 19:33 **[ТС]**

Остановка, что и происходит на данный момент, тут проблем нет.
Проблема в том, когда ползунок перематываешь на начало, то можно прослушать сначала, а не с 15 секунды!
Когда при переводе ползунка до 27 секунды он возвращается в исходное положение и не дает прослушать ни 23-26 секунд!

Что добавить, изменить нужно, чтоб перебрасывало ползунок в исходное положение, в данном случае 15 секунд, и когда в право двигаешь и когда влево?

@Mr_Sergo · 13.10.2019, 19:34

кстати ссылка на демку из моего первого сообщения https://codepen.io/Mr_Sergo/pe... itors=1010

@Scooterok · 13.10.2019, 19:37 **[ТС]**

Ну так у меня вроде так!
Вы же можете просмотреть исходный код, по ссылке что я выше писал.
Поправьте меня, если у меня что-то не так?!

@Mr_Sergo · 13.10.2019, 19:48

Scooterok,

Так? https://codepen.io/Mr_Sergo/pe... itors=1010

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var audio = document.querySelector('#my-audio');
 
audio.addEventListener('seeked', checkAudio);
audio.addEventListener('timeupdate', checkAudio);
 
function checkAudio(){
    if (audio.currentTime < 15)
        audio.currentTime = 15;
    if (audio.currentTime >= 20) {
        audio.currentTime = 15;
        audio.pause();
    }
}

@Scooterok · 13.10.2019, 19:55 **[ТС]**

Спасибо, чуть подправил, но в основном то, что нужно.
Еще раз большое спасибо!

@Mr_Sergo · 13.10.2019, 20:02

Сообщение от Scooterok

Спасибо

Не за что

@Scooterok · 13.10.2019, 21:01 **[ТС]**

Не хотелось бы плодить темы, еще вопрос есть, если аудио файл весит определенное ко-во мб, допустим 2.4, и если я даю прослушивать только часть, есть ли в джаваскрипте по этому же принципу буферизация, чтоб выкачивался не весь файл для прослушивания, а в рамках заданных секунд от и до?
Ткните пальцем плиз в какую сторону копать...

Добавлено через 31 минуту
В Edge кстати почему-то с первой минуты идёт, т.е. игнорирует джаваскрипт...
А в яблоке говорят вообще нет звука, с этим буду еще позже разбираться, так как пока под руками нет яблока.
В самсунге всё ок...
Можно как-то пофиксить, чтоб в Edge (IE) работало корректно?
Может MIME type в .htaccess файл прописать нужно, или в <head>?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Scooterok 0 / 0 / 0 Регистрация: 13.10.2019 Сообщений: 7
	13.10.2019, 19:18 [ТС]
	to Mr_Sergo, Спасибо, но тут косяк либо браузера либо я что-то не так делаю. Допустим есть некий файл 27 сек. Мне нужно разрешить прослушать с 15 сек по 20 сек. В Вашем примере почему-то удается прослушать с начала, если перемотать... А в первом примере от klopp после телодвижение с ползунком вообще страницу перегружать понадобилось, так как ничего не происходила после сдвига влево вправо ползунка, кроме как возвращался он на место. Может я что-то не так делаю, выше ссылка на тест, большая просьба посмотреть и ткнуть В идеале вообще скрыть ползунок времени, но это скорее не на форум джаваскриптов, а на другой, по HTML5 audio Добавлено через 13 минут т.е. проблема в том что когда перемотаешь на начало, оно не перебрасывает на vidin, и даёт прослушать сначала. Я правда еще в других браузерах не тестировал... 0

@Scooterok 0 / 0 / 0 Регистрация: 13.10.2019 Сообщений: 7
	13.10.2019, 19:33 [ТС]
	Остановка, что и происходит на данный момент, тут проблем нет. Проблема в том, когда ползунок перематываешь на начало, то можно прослушать сначала, а не с 15 секунды! Когда при переводе ползунка до 27 секунды он возвращается в исходное положение и не дает прослушать ни 23-26 секунд! Что добавить, изменить нужно, чтоб перебрасывало ползунок в исходное положение, в данном случае 15 секунд, и когда в право двигаешь и когда влево? 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	13.10.2019, 19:34
	кстати ссылка на демку из моего первого сообщения https://codepen.io/Mr_Sergo/pe... itors=1010 0

@Scooterok 0 / 0 / 0 Регистрация: 13.10.2019 Сообщений: 7
	13.10.2019, 19:37 [ТС]
	Ну так у меня вроде так! Вы же можете просмотреть исходный код, по ссылке что я выше писал. Поправьте меня, если у меня что-то не так?! 0

@Scooterok 0 / 0 / 0 Регистрация: 13.10.2019 Сообщений: 7
	13.10.2019, 19:55 [ТС]
	Спасибо, чуть подправил, но в основном то, что нужно. Еще раз большое спасибо! 0

@Scooterok 0 / 0 / 0 Регистрация: 13.10.2019 Сообщений: 7
	13.10.2019, 21:01 [ТС]
	Не хотелось бы плодить темы, еще вопрос есть, если аудио файл весит определенное ко-во мб, допустим 2.4, и если я даю прослушивать только часть, есть ли в джаваскрипте по этому же принципу буферизация, чтоб выкачивался не весь файл для прослушивания, а в рамках заданных секунд от и до? Ткните пальцем плиз в какую сторону копать... Добавлено через 31 минуту В Edge кстати почему-то с первой минуты идёт, т.е. игнорирует джаваскрипт... А в яблоке говорят вообще нет звука, с этим буду еще позже разбираться, так как пока под руками нет яблока. В самсунге всё ок... Можно как-то пофиксить, чтоб в Edge (IE) работало корректно? Может MIME type в .htaccess файл прописать нужно, или в <head>? 0

Каким методом можно остановить аудиодорожку

Решение