Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

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

Богдан Пахомов Профи (663), на голосовании 2 месяца назад
Такая проблема. Пытаюсь проигрывать аудио на событие вебсокета, с условиями всё в порядке. Проигрываю аудио в скрипте, аудио элемента в ДОМ не
Я в курсе про то, что нельзя проигрывать аудио, когда пользователь не повзаимодействовал со домом страницы.
Сейчас во вкладке на событие появляется аудио иконка (типа аудио проигрывается), но звука нет. Проверял - громкость на 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
}


Голосование за лучший ответ
♡$ⴎG@r₱u₷sყ♡ Искусственный Интеллект (144765) 3 месяца назад
GPT-4o
https://pastebin.com/ATV3FLUT
Богдан ПахомовПрофи (663) 3 месяца назад
лучше на stackOverflow было пойти
♡$ⴎG@r₱u₷sყ♡ Искусственный Интеллект (144765) Богдан Пахомов, тебе виднее
Chromatic Scale Искусственный Интеллект (183207) 3 месяца назад
Ваш код работает правильно с точки зрения логики, однако проблема воспроизведения звука может быть связана с политикой браузера относительно воспроизведения медиафайлов без взаимодействия с пользователем. В современных браузерах действительно существуют ограничения, которые предотвращают автоматическое воспроизведение аудио или видео до тех пор, пока пользователь не выполнит какое-либо действие на странице.

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

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` пытается воспроизвести аудио и, в случае неудачи (например, из-за отсутствия взаимодействия пользователя), добавляет слушатель на клик, который воспроизведет аудио при следующем клике пользователя на странице.

Попробуйте этот подход, и это должно помочь обойти ограничения браузера.
Оракул (50000) 3 месяца назад
 можешь помочь❓ 
есть карточная игра косынка

я стянул с того сайта код,
файлы
но
не играется

вот архив zip
https://cloud.mail.ru/public/nohU/AJXn7m1RF

а это
сайт где игра онлайн
с
него
стянул
https://g.vseigru.net/11/igra-kosynka-klondajk/
Chromatic Scale Искусственный Интеллект (183207) ⚠, Давай попробуем разобраться, почему игра не работает. Я извлеку содержимое твоего архива, чтобы посмотреть, какие файлы там есть и попытаюсь понять, в чем может быть проблема. Из архива были извлечены следующие файлы: - HTML файлы для веб-страницы. - JavaScript файлы для логики игры. - CSS файлы для стилей. - Папка с медиафайлами (картинки и аудио). Теперь давай проверим содержимое основных файлов (`kosinka.html`, `script.6.js`, `style.css`) для того, чтобы понять, как игра связана с этими файлами и могут ли быть там какие-то ошибки, из-за которых игра не работает. Я покажу содержимое HTML и JavaScript файлов.
Похожие вопросы