Использование Strudel в вашем проекте 🌀 Bulka

Использование Strudel в вашем проекте

Это руководство показывает различные способы начать использовать Strudel в вашем собственном проекте.

Соблюдайте лицензию

Во-первых, пожалуйста, уделите время, чтобы понять свободную/открытую лицензию Strudel, AGPL-3.0.

Вот краткое изложение, но проверьте лицензию на юридические определения и обязанности.

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

Среди прочего, это означает, что когда вы делитесь своей работой, все приложение должно быть распространено под той же свободной/открытой лицензией или совместимой с ней. Это потому, что мы хотим, чтобы Strudel оставался свободным/открытым. Другими словами, вам не разрешается распространять интеграции Strudel с библиотеками или другим кодом, который не имеет совместимой свободной/открытой лицензии.

Это также применяется к клонам, созданным на основе чтения исходного кода Strudel, поскольку с юридической точки зрения это считается ‘производной работой’. Опять же, пожалуйста, прочитайте лицензию для деталей.

Встраивание Strudel REPL

Есть 3 быстрых способа встроить strudel на ваш веб-сайт:

  1. Встроить веб-сайт strudel как iframe напрямую
  2. Встроить веб-сайт strudel как iframe, используя @strudel/embed
  3. Встроить REPL напрямую, используя @strudel/repl

Внутри iframe

Использование iframe - самый простой способ встроить мелодию strudel. Вы можете встроить любой pattern на ваш выбор через iframe и URL pattern на ваш выбор:

<iframe src="https://strudel.cc/?xwWRfuCE8TAR" width="600" height="300"></iframe>

URL можно получить, нажав share в REPL. Обратите внимание, что эти ссылки для обмена зависят от базы данных, которая не гарантированно будет существовать вечно. Чтобы убедиться, что ваш код не потерян, вы также можете использовать длинный URL:

<iframe
  src="https://strudel.cc/#c2V0Y3BzKDEpCm4oIjwwIDEgMiAzIDQ%2BKjgiKS5zY2FsZSgnRzQgbWlub3InKQoucygiZ21fbGVhZF82X3ZvaWNlIikKLmNsaXAoc2luZS5yYW5nZSguMiwuOCkuc2xvdyg4KSkKLmp1eChyZXYpCi5yb29tKDIpCi5zb21ldGltZXMoYWRkKG5vdGUoIjEyIikpKQoubHBmKHBlcmxpbi5yYW5nZSgyMDAsMjAwMDApLnNsb3coNCkp"
  width="600"
  height="300"
></iframe>

Этот длинный URL можно просто скопировать из адресной строки, когда вы находитесь на веб-сайте strudel. Он всегда отражает последнее выполнение вашего кода.

@strudel/embed

Чтобы упростить процесс встраивания через iframe, вы можете использовать package @strudel/embed:

<script src="https://unpkg.com/@strudel/embed@latest"></script>
<strudel-repl>
  <!--
setcps(1)
n("<0 1 2 3 4>*8").scale('G4 minor')
.s("gm_lead_6_voice")
.clip(sine.range(.2,.8).slow(8))
.jux(rev)
.room(2)
.sometimes(add(note("12")))
.lpf(perlin.range(200,20000).slow(4))
-->
</strudel-repl>

Это загрузит веб-сайт strudel в iframe, используя код, предоставленный в HTML-комментариях <!-- -->. HTML-комментарии необходимы, чтобы браузер не интерпретировал его как HTML.

Для альтернативных способов загрузки этого package см. @strudel/embed README.

@strudel/repl

Загрузка strudel напрямую на ваш сайт, без iframe, выглядит похоже на вариант с iframe:

<script src="https://unpkg.com/@strudel/repl@latest"></script>
<strudel-editor>
  <!--
setcps(1)
n("<0 1 2 3 4>*8").scale('G4 minor')
.s("gm_lead_6_voice")
.clip(sine.range(.2,.8).slow(8))
.jux(rev)
.room(2)
.sometimes(add(note("12")))
.lpf(perlin.range(200,20000).slow(4))
-->
</strudel-editor>

Здесь мы загружаем @strudel/repl вместо @strudel/embed, и компонент называется strudel-editor вместо strudel-repl. Да, именование немного запутанное..

Преимущество использования repl без iframe заключается в том, что вы можете закрепить используемую версию strudel:

<script src="https://unpkg.com/@strudel/repl@1.0.2"></script>
<strudel-editor>
  <!--
...
-->
</strudel-editor>

Это гарантирует, что ваш pattern не сломается из-за изменений в проекте strudel в будущем.

Для получения дополнительной информации об этом package см. @strudel/repl README.

С вашим собственным UI

Приведенный выше подход предполагает, что вы хотите использовать встроенный редактор codemirror. Если вы предпочитаете использовать свой собственный UI, вы можете использовать package @strudel/web:

<!doctype html>
<script src="https://unpkg.com/@strudel/web@1.0.3"></script>
<button id="play">play</button>
<button id="stop">stop</button>
<script>
  initStrudel();
  document.getElementById('play').addEventListener('click', () => note('<c a f e>(3,8)').jux(rev).play());
  document.getElementById('stop').addEventListener('click', () => hush());
</script>

Для получения дополнительной информации об этом package см. @strudel/web README.

Через npm

Все packages и многие другие доступны на npm под namespace @strudel. На самом деле есть гораздо больше packages, которые вы можете использовать, чтобы иметь детальный контроль над тем, что вы используете, а что нет. Чтобы использовать эти packages, вы должны использовать bundler, который поддерживает es modules, например vite.

Чтобы узнать больше о назначении каждого package, см. Packages