Javascript (Vue) Проигрывание аудио на событие webSocket

Question

Javascript (Vue) Проигрывание аудио на событие webSocket

Богдан Пахомов Профи (667), на голосовании 4 месяца назад

Такая проблема. Пытаюсь проигрывать аудио на событие вебсокета, с условиями всё в порядке. Проигрываю аудио в скрипте, аудио элемента в ДОМ не
Я в курсе про то, что нельзя проигрывать аудио, когда пользователь не повзаимодействовал со домом страницы.
Сейчас во вкладке на событие появляется аудио иконка (типа аудио проигрывается), но звука нет. Проверял - громкость на 1, максимальная.
Интересный факт в том, что если как-то задействовать аудио в setInterval (()=>{audio.play},2000), то всё будет работать

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

Нужна просто информация, почему такая фигня с аудио происходит (вопрос людям, которые имеют немалый опыт работы с аудио)

Очень поможете, спасибо

import notificationSound from '@/shared/assets/sounds/accepted_substation_notification_sound.mp3'

export function usePlayNotification({ conditionStatus, userSubstationId }: { conditionStatus: string, userSubstationId: number | null | undefined }) {
const userStatus = conditionStatus
const userSubstation = userSubstationId
const audio = new Audio(notificationSound)
audio.play()

function canPlayNotification({ status, substation_id }: { status: string, substation_id: number | null }) {
if (substation_id && substation_id === userSubstation && status === userStatus) {
audio.currentTime = 0
audio.volume = 1
audio.play()
}
}
return canPlayNotification
}

Answer 1

♡$ⴎG@r₱u₷sყ♡ Искусственный Интеллект (157169) 5 месяцев назад

GPT-4o

https://pastebin.com/ATV3FLUT

Богдан ПахомовПрофи (667) 5 месяцев назад

лучше на stackOverflow было пойти

♡$ⴎG@r₱u₷sყ♡ Искусственный Интеллект (157169) Богдан Пахомов, тебе виднее

Answer 2

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

Вот несколько рекомендаций, которые могут помочь решить вашу проблему:

1. **Запрос разрешения на воспроизведение звука**: Убедитесь, что пользователь взаимодействовал со страницей (например, кликнул кнопку) перед попыткой воспроизведения аудио.

2. **Отложенное воспроизведение**: В некоторых случаях, использование `setTimeout` или `setInterval` может помочь обойти ограничение.

3. **Политика браузера**: Убедитесь, что в настройках браузера разрешено воспроизведение медиафайлов для вашего сайта.

Также, вы можете немного изменить ваш код для использования пользовательского взаимодействия перед воспроизведением звука:

```javascript
import notificationSound from '@/shared/assets/sounds/accepted_substation_notification_sound.mp3'

export function usePlayNotification({ conditionStatus, userSubstationId }: { conditionStatus: string, userSubstationId: number | null | undefined }) {
const userStatus = conditionStatus;
const userSubstation = userSubstationId;
const audio = new Audio(notificationSound);

// Функция для инициации аудио при взаимодействии пользователя
function initiateAudio() {
audio.play().catch(error => {
console.log("Interaction required to play audio: ", error);
document.addEventListener('click', () => {
audio.play();
}, { once: true });
});
}

initiateAudio();

function canPlayNotification({ status, substation_id }: { status: string, substation_id: number | null }) {
if (substation_id && substation_id === userSubstation && status === userStatus) {
audio.currentTime = 0;
audio.volume = 1;
audio.play().catch(error => {
console.log("Error playing notification sound: ", error);
});
}
}

return canPlayNotification;
}
```

В этом примере, функция `initiateAudio` пытается воспроизвести аудио и, в случае неудачи (например, из-за отсутствия взаимодействия пользователя), добавляет слушатель на клик, который воспроизведет аудио при следующем клике пользователя на странице.

Попробуйте этот подход, и это должно помочь обойти ограничения браузера.