Как подменить файл звука на свой в HTML?

Question

[Markella]

Суть моего вопроса была здесь:
Как найти источник звука уведомления на сайте?
Но теперь появился новый вопрос: как подменить файл звука уведомления на свой? Ссылка на него находиться в HTML каркасе сайта. Доступа к файлам сайта нет, то есть сделать надо через костыли какие-то.

Comments

[Владислав Лысков]

переименовываете файл как исходный, копировать - вставить на вопрос заменить файл, отвечаете да - профит

[Markella]

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

Answer 1

[Артём Дайнов]

1. Написать плагин, который будете запускать каждый раз, как будете открывать вкладку браузера.
2. В плагине реализовать код, который будет искать аудио плеер.
3. Берем src и в него подставляем свою ссылку.

Вот и все решение. Ну возможно имеется какой-то плагин для браузеров, но я такой не видел.

Comments

[Markella]

Это единственный способ? Возможно есть что-то одноразовое, до первой перезагрузки страницы..

[Aetae]

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

[Markella]

Aetae,

<div class="offscreen">
<audio id="msg" preload="auto">
<source type="audio/mpeg" src="/msg.mp3">
<source type="audio/wav" src="/msg.wav">
<source type="audio/ogg" src="/msg.ogg">
<embed src="/msg.wav" type="audio/wav" autostart="0" autoplay="0" width="1" height="1" id="msg2" enablejavascript="1">
</audio>
</div>

Вот такой участок когда в каркасе сайта. Нужно заменить я так понимаю все 4 файла с разным расширением. Хотя судя по вкладке media проигрывается только mp3. Еще нюанс от куда брать заменённый файл, с локального хранилища можно? Или нужно на файлообменник какой-то залить.. Возможно есть небольшой скрипт для Tempermonkey? Для этого.

[Aetae]

Markella, достаточно поменять первый - проигрываться первый по порядку который поддерживает браузер.
С файлом сложнее, он должен хоститься на каком-то сайте, однако можно закодировать его в одну строчку data uri.
Код для замены простой: в консоли написать и нажать enter

document.querySelector('source[src="/msg.mp3"]').src = "data:audio/mpeg;base64,<и т.д. то что получено в сервисе data uri>"

Если вы принципиально не можете поставить расширение с поддержкой пользовательских скриптов, которое будет автоматически запускать этот код за вас(например tampermonkey), то можно обойтись классической технологией букмарклетов: создаёте закладку, вместо адреса в которой пишете:

javascript:void(document.querySelector('source[src="/msg.mp3"]').src = "data:audio/mpeg;base64,<и т.д. то что получено в сервисе data uri>");

и при нажатии на неё файл будет заменяться.

[Markella]

Aetae, сделал через Tampermonkey ссылка в коде меняется, но сам звук остается родной почему-то

[Aetae]

Markella, да, извиняюсь, если меняешь source надо принудительно перезагрузить:

const source = document.querySelector('source[src="/msg.mp3"]')
source.src = "data:audio/mpeg;base64,<и т.д. то что получено в сервисе data uri>";
source.parentNode.load();

[Markella]

Aetae, ты не человек, а зверь, спасибо!

[Aetae]

Markella, как бонус можно ещё так вытянуть звук больше максимума:

const source = document.querySelector('source[src="/msg.mp3"]')
source.src = "data:audio/mpeg;base64,<и т.д. то что получено в сервисе data uri>";
const audio = source.parentNode;
audio.load();
audio.volume = 1;

const audioContext = new AudioContext();
const gainNode = new GainNode(audioContext, { gain: 10 });

audioContext
    .createMediaElementSource(audio)
    .connect(gainNode)
    .connect(audioContext.destination);

Где gain - множитель.(правда больше 6 уже обычно не имеет особого смысла, т.к. врезается в железные возможности)
Скорее всего это не понадобится, но на всякий случай.

[Владислав Лысков]

Markella, дак ты отметь ответ этого зверя решением, чёж ты так

[Markella]

Владислав Лысков, как комментарий отметить как ответ?

[Владислав Лысков]

Markella, ну комментарий же под ответом

[Markella]

Владислав Лысков, так это разные люди, или это так работает?

[Владислав Лысков]

Markella, ну так-то ты прав, я не обратил внимания, что это не один человек)

[Markella]

Владислав Лысков,