Offline работа html+js без сервера

@andyj · Регистрация: 16.03.2017

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

Добрый день, проконсультируйте пожалуйста.

Есть html+js сайт (справочник), который по мере надобности докачивает картинки и mp3 файлы с сервера и проигрывает/отображает их.

Задумка:
засунуть ВЕСЬ сайт в зип файл и дать скачать пользователю.
Потом открыть в браузере обычным кликом по html и пользоваться
все нужные файлы будут лежать в папке html и будут докачиваться по мере надобности.

НЕ ХОЧУ запускать веб-сервер у пользователя!

Если встраиваю в страницу

HTML5
1
2
3
<audio id="audio_1" preload="metadata" hidden="true" autostart="false">
    <source src="10963807-631152000.mp3" type="audio/mpeg">
</audio>

JavaScript
1
2
3
<script>
    audio_1.play()
</script>

то все работает. Но если пишу

JavaScript
1
2
3
4
5
6
<script>
    var audio_1 = document.getElementById("audio_1");
    audio_1.autoplay = true;
    audio_1.src = '108811-631152008.mp3'
    audio_1.load();
</script>

то получаю (добавил "реакторы-обработчики" что НАЧАЛ закачку, но нет сообщения что закачка закончена (хотя файл 100% лежит в этой-же папке).

Вопрос: какие у меня ДЕФОЛТНЫЕ доступы в оффлайн работе браузера??? Можно ли как-нибудь "догрузить" контекст в режиме запуска с URL вида file:///C:/test/index.html Или что можно почитать по этому вопросу? Или посоветуйте хотя-бы ключевые слова для поисковиков!

Не по теме:

нагуглил это: https://stackoverflow.com/ques... web-server
Но не хочу заставлять пользователя играться с ключами запуска Хрома!

Плиииз! Не советуйте как "обойти" или какой сервер использовать - просто скажите на что у меня есть права!!! (если нужных нет, то я откажусь от задумки начну думать над независимой программой со встроенным сервером)

@Ares111 · 19.07.2017, 00:40

Эм.. ну изначально Javascript не умеет работать с файлами на жестком диске и запускать программы на компе пользователя, также не имеет доступа к операционке. Это сделано из соображений безопасности.

@andyj · 19.07.2017, 00:44 **[ТС]**

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

ну изначально Javascript не умеет работать с файлами на жестком диске

То есть запрет 100%й? В теги html изначально можно подгрузить что хочешь, но догрузить через js уже никак без хаков браузера? Даже для картинок и/или музыки?

@Ares111 · 19.07.2017, 00:56

Последние версии браузеров вроде-как начали ограниченно поддерживать работу с файлами в специально выделенной директории - "песочнице". Но не думаю, что там широкие возможности. Могу предложить загуглить по запросу типа: "с какими файлами на компьютере пользователя может работать javascript".

Добавлено через 1 минуту
Да, а для чего все это, если не секрет?

Ведь при открытии нужной страницы все, что для нее нужно и так отлично подгрузится ))

@Пифагор · 19.07.2017, 01:06

andyj, почитайте про FileAPI.

@andyj · 19.07.2017, 03:32 **[ТС]**

Сообщение от Пифагор

почитайте про FileAPI.

Спасибо!!! Еще не понял как, но подгрузка картинок в примерах работает. Выбираю диалогом картинку, а он отображет ее на странице. Может и с аудио получится...

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

Да, а для чего все это, если не секрет?
Ведь при открытии нужной страницы все, что для нее нужно и так отлично подгрузится ))

Это "справочник". Больше 800-1000 картинок. Столько-же аудио-файлов. Около 40Мб. Аrray с описаниями и ссылками на картинки/аудио (раньше рестом json подгружал с сервера).
Хочу сделать справочник "портабл"(=оффлайн) безопасными форматами (без ЕХЕ-шников, а значит без сервера) - скачал зип/рар, распаковал, запустил index.html и пользуйся... Теоретически даже на планшете можно запустить без "упаковки в программу".

Добавлено через 1 час 14 минут
увы!!! Перечитал все до чего дотянулся... можно выбрать файлы через <input> и тогда можно их хоть побайтово читать (никуда не загружая), но без этого - никак!

облом!!! надеялся что некий тег откроет доступ к папке рядом с index.html для возможности считывать файлы из этой папки...

@Ares111 · 19.07.2017, 03:55

Нда, ну безопасность в использовании javascript превыше всего ))
В общем, единственное, что могу предложить, пишем на сайте:
"Уважаемый пользователь, если вы хотите пользоваться музыкой и картинками данного сайта оффлайн (без подключения к интернету), вы можете скачать сайт полностью, нажав СЮДА. После нажатия скачается архив, который нужно распаковать в удобную для вас папку, после чего среди распакованных файлов запустить двойным кликом index.html. Приятного пользования."

Других вариантов думаю, что нету.

@andyj · 19.07.2017, 04:03 **[ТС]**

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

Нда, ну безопасность в использовании javascript превыше всего ))
В общем, единственное, что могу предложить, пишем на сайте:
"Уважаемый пользователь, если вы хотите пользоваться музыкой и картинками данного сайта оффлайн (без подключения к интернету), вы можете скачать сайт полностью, нажав СЮДА. После нажатия скачается архив, который нужно распаковать в удобную для вас папку, после чего среди распакованных файлов запустить двойным кликом index.html. Приятного пользования."
Других вариантов думаю, что нету.

Вообще-то я так и планировал! Проблема в том что это НЕ поможет! Я не могу подргрузить все 1000 аудио и фото файлов прямо в html(долго ждать прийдется и памяти займет уйму), а подгружать их алгоритмически (из js) по мере надобности не дает "безопасность браузеров". Причем (в планах) время от времени будут выходить обновления с еще большим количеством файлов... Других разумных вариантов не вижу!

Похоже прийдется думать над сервером... (конфликты с другими программами на стороне клиента, теряется мультиплатформенность, опасность подхватить вирус)

@Ares111 · 19.07.2017, 09:19

изначально думал, что ваш сайт, лежащий на сервере, должен манипулировать файлами на компе пользователя - за это и беседа шла; если сайт лежит у пользователя на компе и манипулирует файлами из своей-же дериктории, то тут другое дело

Проверил ваш код из первого поста:

JavaScript
1
2
3
4
5
6
<script>
    var audio_1 = document.getElementById("audio_1");
    audio_1.autoplay = true;
    audio_1.src = '108811-631152008.mp3'
    audio_1.load();
</script>

- он у меня замечательно работает

Сделал таким образом:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
 </head>
<body>
<audio id="audio_1" preload="metadata" hidden="true" autostart="false">
    <source src="10963807-631152000.mp3" type="audio/mpeg">
</audio>
<button id="button1">Кнопка 1</button>
<button id="button2">Кнопка 2</button>
<script>
    button1.onclick = function() {
        audio_1.play()
        console.log('Запущена композиция Нино_Винник');
    }
    
    button2.onclick = function() {
    var audio_1 = document.getElementById("audio_1");
    audio_1.autoplay = true;
    audio_1.src = '108811-631152008.mp3'
    audio_1.load();
    console.log('Запущена композиция Фантазер_Едокимов');
    }
</script>
</body>
</html>

Нажимаю на кнопку 1 - играет первая композиция, нажимаю на кнопку 2 - первая композиция перестает играть и начинает играть вторая. В общем, работает.

@Balanaar · 19.07.2017, 09:31

andyj, как вам уже сказали, JS может без проблем читать файлы, находящиеся в той же директории, что и исполняемый файл, либо в дочерней директории, с некоторыми оговорками. Например, JS не может получить полный список файлов, находящихся в определённой папке, как это умеет сервер. Вы вполне можете реализовать ваш оффлайн справочник, но вам придётся упаковывать в архив все данные без исключения (все картинки, аудио- и видеофайлы). Также вам нужно будет как-то структурировать данные, поскольку у вас будет отсутствовать БД.
Также JS не может изменять файловую структуру на компьютере. Соответственно, если вы планируете в дальнейшем обновления - вам нужно будет заставлять пользователя скачивать архив с новой версией заново и целиком. Либо упаковывайте только изменённые или добавленные файлы и просите пользователя распаковать архив строго в ту папку, в которую была распакована предыдущая версия с заменой файлов.

@andyj · 19.07.2017, 16:11 **[ТС]**

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

- он у меня замечательно работает

Тогда почему же у меня не работает???

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
 </head>
<body>
<audio id="audio_1" preload="metadata" hidden="true" autostart="false">
    <source src="10963807-631152000.mp3" type="audio/mpeg">
</audio>
<audio id="audio_2" preload="metadata" hidden="true" autostart="false">
    <source src="108811-631152008.mp3" type="audio/mpeg">
</audio>
<button id="button1">Кнопка 1</button>
<button id="button2">Кнопка 2</button>
<button id="button3">Кнопка 3</button>
<script>
    var audio_1 = document.getElementById("audio_1");
    var audio_2 = document.getElementById("audio_2");
    button1.onclick = function() {
        audio_1.play()
        console.log('Запущена композиция 1');
    }
    button2.onclick = function() {
        audio_2.play()
        console.log('Запущена композиция 2');
    }
    
    button3.onclick = function() {
        audio_1.autoplay = true;
        audio_1.src = '108811-631152008.mp3'
        audio_1.load();
        audio_1.play()
        console.log('Запущена композиция 2 в 1');
    }
</script>
</body>
</html>

1 и 2 - работают
3 - выдает ошибку "Uncaught (in promise) DOMException: Failed to load because no supported source was found."
(Опера 46.0)

@Balanaar · 19.07.2017, 16:14

Опера не поддерживает формат .mp3
Источник: http://htmlbook.ru/html/audio

@andyj · 19.07.2017, 17:14 **[ТС]**

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

Опера не поддерживает формат .mp3

Странно все это!

Картинки подменять - заработало, wav-файлы тоже, mp3 файлы из удаленного источника - успешно подгружает, но mp3 из локального - "Uncaught (in promise) DOMException: The play() request was interrupted by a new load request."

Выходит, единственный до сих пор "универсальный" формат это wav??? Даже OGG похоже на маке не откроется!

Могу конечно mp3 в wav перевести, но тогда не 40 Мб будет, а 400Мб...

@Balanaar · 19.07.2017, 17:34

Достаточно указать 2 источника: mp3 и ogg. Должно работать везде.
По поводу ошибки: попробуйте исправить на:

JavaScript
1
2
3
4
5
6
7
button3.onclick = function() {
        audio_1.pause();
        audio_1.src = '108811-631152008.mp3'
        audio_1.load();
        audio_1.play()
        console.log('Запущена композиция 2 в 1');
    }

Возможно поможет.

@andyj · 19.07.2017, 17:47 **[ТС]**

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

Достаточно указать 2 источника: mp3 и ogg

В архиве придется оба файла давать. Архив растет в 2 раза. +нужно авто-конвертер писать (для автогенератора архива).

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

audio_1.pause();

не помогло!

@ntlinuxnt · 19.07.2017, 21:51

https://habrahabr.ru/post/110906/
А что на счет этого?

@andyj · 19.07.2017, 22:40 **[ТС]**

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

А что на счет этого?

либа использует флеш-плеер!

@ntlinuxnt · 19.07.2017, 22:43

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

флеш-плеер

Иначе никак

@Padimanskas · 20.07.2017, 11:59

andyj, попробуйте nwjs или electron там нет ограничений одного домена, смешанного содержимого, запрета доступа к фс и прочего геморроя рыцарей толстых приложений

@andyj · 20.07.2017, 12:15 **[ТС]**

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

попробуйте nwjs

Тоже думал об этом... Сервер на ноде (чистый бинарник) под Win полностью портабл = 20Мб, бинарник портабл nwjs = 140Мб
Мой архив 40Мб распакованных... Даже если удвоить за счет mp3+ogg = 80Мб. Даже если все mp3 перевести в wav то архив будет все еще 40-60Мб.
Все еще думаю/работаю над сборником "без сервера" с mp3. (можно будет сказать "в Опере звук не работает")

+ заставлять юзеров скачивать (и таскать на флешке) бинарник - это нарываться на вирусы!

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@Ares111 59 / 22 / 12 Регистрация: 30.05.2017 Сообщений: 73
	19.07.2017, 00:40
	Эм.. ну изначально Javascript не умеет работать с файлами на жестком диске и запускать программы на компе пользователя, также не имеет доступа к операционке. Это сделано из соображений безопасности. 0

@Ares111 59 / 22 / 12 Регистрация: 30.05.2017 Сообщений: 73
	19.07.2017, 00:56
	Последние версии браузеров вроде-как начали ограниченно поддерживать работу с файлами в специально выделенной директории - "песочнице". Но не думаю, что там широкие возможности. Могу предложить загуглить по запросу типа: "с какими файлами на компьютере пользователя может работать javascript". Добавлено через 1 минуту Да, а для чего все это, если не секрет? Ведь при открытии нужной страницы все, что для нее нужно и так отлично подгрузится )) 1

@Пифагор 2172 / 1655 / 840 Регистрация: 10.01.2015 Сообщений: 5,207
	19.07.2017, 01:06
	Сообщение было отмечено andyj как решение Решение andyj, почитайте про FileAPI. 0

@Ares111 59 / 22 / 12 Регистрация: 30.05.2017 Сообщений: 73
	19.07.2017, 03:55
	Нда, ну безопасность в использовании javascript превыше всего )) В общем, единственное, что могу предложить, пишем на сайте: "Уважаемый пользователь, если вы хотите пользоваться музыкой и картинками данного сайта оффлайн (без подключения к интернету), вы можете скачать сайт полностью, нажав СЮДА. После нажатия скачается архив, который нужно распаковать в удобную для вас папку, после чего среди распакованных файлов запустить двойным кликом index.html. Приятного пользования." Других вариантов думаю, что нету. 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	19.07.2017, 09:31
	andyj, как вам уже сказали, JS может без проблем читать файлы, находящиеся в той же директории, что и исполняемый файл, либо в дочерней директории, с некоторыми оговорками. Например, JS не может получить полный список файлов, находящихся в определённой папке, как это умеет сервер. Вы вполне можете реализовать ваш оффлайн справочник, но вам придётся упаковывать в архив все данные без исключения (все картинки, аудио- и видеофайлы). Также вам нужно будет как-то структурировать данные, поскольку у вас будет отсутствовать БД. Также JS не может изменять файловую структуру на компьютере. Соответственно, если вы планируете в дальнейшем обновления - вам нужно будет заставлять пользователя скачивать архив с новой версией заново и целиком. Либо упаковывайте только изменённые или добавленные файлы и просите пользователя распаковать архив строго в ту папку, в которую была распакована предыдущая версия с заменой файлов. 2

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	19.07.2017, 16:14
	Опера не поддерживает формат .mp3 Источник: http://htmlbook.ru/html/audio 1

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	19.07.2017, 21:51
	https://habrahabr.ru/post/110906/ А что на счет этого? 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	20.07.2017, 11:59
	andyj, попробуйте nwjs или electron там нет ограничений одного домена, смешанного содержимого, запрета доступа к фс и прочего геморроя рыцарей толстых приложений 0

Offline работа html+js без сервера

Решение