Sonic Pi now runs in the web

Support, Help & Resources
1

Hey everyone,

Sonic Pi now runs in your browser. It’s now live on https://sonic-pi.net

Let me know your thoughts!

2

A nice milestone! Some nice improvements since Sonic Tau I think :slight_smile:

I may bring up something here that you’re already aware of, so in that case, apologies. There’s a few things that tripped me up when having a look around, or that I think might be potentially confusing, mostly to do with the documentation. Here’s a list: (Apologies for a bit of a wall of text :sweat_smile:)

  • Code editor:

    • Having the code editor’s menu item over in the right hand corner of the page in contrast to the tutorial etc in the left corner feels odd, since the editor is a key function of the site, and at least to me, it seems that it would make more sense to group it with the primary navigation items.
    • I’m not sure that the Jam mode button ‘Exec’ describes its function very clearly - maybe something more like “Excl” for exclusive makes better sense?

  • Documentation:

    • Some headings are hard to read: mostly where there is an all-caps heading with a tiny font size. Yes, there are buttons to modify the documentation font size, but if only the headings are hard to read, that means increasing font-size of all documentation text makes other text unnecessarily overly large. Related:
    • I think it would be beneficial to have a smaller variation in font-sizes in the documentation panel - having a range from tiny text in the live preview controls to tiny and small text in the opt cards to larger text for the code preview is not ideal in my opinion - making the tiny and small text larger and standardising the body/paragraph text sizes would also make it much easier to read.
    • It was not immediately obvious as to where the action buttons for modifying the font-size of the documentation were, but I did eventually find them. It may be confusing because it could be natural to assume that the entire button panel on the far left edge is for navigation, rather than a mixture of navigation and action shortcuts.
    • Having documentation jammed into small cards for the opts makes them harder to read (smaller text, and having to shift in large-ish increments across the page to the next card instead of a tiny amount onto the next line - more eye movements are required, which I’d argue is not ideal, especially with large amounts of text.
    • Card Decks:
      • Progressive disclosure of the cards in the card decks is great for a paced reveal that avoids potential information overload, but I’d argue it’s unhelpful if you want to scan them all at once, and suggest making it a toggleable setting.
      • Having the ‘X Decks’ close/back button in line with the current deck’s title is confusing - it would potentially read better if the back button was above the title - however:
      • Displaying a collapsed card deck summary when navigating back to show the navigation menu for all decks is confusing, and hiding the nav menu items makes it much more work to navigate between them. My suggestions: 1) Don’t hide nav menu items, 2) Don’t collapse cards in a deck (or at the very least, again make it a toggleable setting if absolutely necessary).
      • The ‘Carry on’ button can be confusing:
        • It’s placed before the content, which breaks the reading flow, because it’s not clear what you are carrying on from.
        • It could be interpreted as ‘move (on)wards [to the next new card]’, rather than just ‘highlight where we got up to’. (I’d say there’d be less need for that also if the current card was more obviously highlighted).
        • Also, the ‘Play’ iconography could be interpreted as meaning ‘from where we currently got to, move forward’, (or even ‘Play the audio’ of the current (or maybe even all?) cards’)
      • Navigation within a deck:
        • The ‘next card’ button can disappear off the edge of the screen, which can be confusing and/or awkward
        • The carousel navigation seems easy to miss and therefore knowing how to navigate between pages of cards can be unclear
        • It can be confusing that the ‘next page’ arrow button in the carousel nav has a double meaning: ‘go to the next page’ or ‘reveal next card on the next page’. I’d suggest keeping the carousel nav to page navigation. There is already a ‘next card’ button, which can automatically go to the next page at the same time, as that’s a logical action if the new card doesn’t already fit on the current page.
        • Lack of a scroll bar in a multi-page list of cards in a deck forces navigation by the small carousel buttons, which is not ideal. A scrollbar allows quick dragging to scan. However,
        • Long horizontal card lists are often more tedious to scroll through in contrast to a more vertical layout
    • It seems unusual that you can edit built-in cards in the GUI. I would imagine it’s better to allow this only for user-created cards.
    • Live Synth/FX previews:
      • When testing something like the autotuner FX, whose preview is a live_loop, whatever sound source is selected will only trigger once per loop, which is to be expected. However, having clickable UI ‘keys’ available to trigger sounds does not mix well with that paradigm - It seems more intuitive at first glance to be able to mash a key with the mouse/tap with a finger multiple times and instantly re-trigger the sound, rather than clicking a key and only hearing a sound when the loop iterates.
      • Modulating any parameter in the live Bitcrusher FX preview mid-playback causes the sound to die.
      • When dragging a slider of a non-modulatable parameter, I’d suggest adding a larger delay/tolerance between slider movements and re-starting the sound - ie smoothing it out more - having constant retriggers that start and rapidly cut off as the slider is repositioned feels a little undesirable.

I have other thoughts about the documentation in general, but I’ll save that for another post soon. :slight_smile: