276 lines
13 KiB
Plaintext
276 lines
13 KiB
Plaintext
.dialog.gear-wizard{ layout: 'dialog', 'layout-id' => 'gear-wizard', id: 'gear-wizard-dialog'}
|
|
.content-head
|
|
%h1.top-header audio gear setup
|
|
|
|
.ftue-inner{ 'layout-wizard' => 'gear-wizard' }
|
|
.wizard-step{ 'layout-wizard-step' => "0", 'dialog-title' => "Understand Your Gear", 'dialog-purpose' => "Intro"}
|
|
.ftuesteps
|
|
.clearall
|
|
.help-text
|
|
Please click the Watch Video button below to see a video explaining the different kinds of gear setups you can use with JamKazam.
|
|
We strongly advise that you watch the instructional videos that are made available at each step of this first-time setup process.
|
|
It will take a few minutes, but it will save you a
|
|
%strong lot
|
|
of time and trouble.
|
|
|
|
.center.video-button-holder
|
|
%a.button-orange.watch-video{href:"#", rel:'external'} WATCH VIDEO
|
|
|
|
.wizard-step{ 'layout-wizard-step' => "1", 'dialog-title' => "Select & Test Audio Gear", 'dialog-purpose' => "SelectAudioGear" }
|
|
.ftuesteps
|
|
.clearall
|
|
.help-text In this step, you will select, configure, and test your audio gear. Please watch the video for best instructions.
|
|
.wizard-step-content
|
|
.wizard-step-column
|
|
%h2 Instructions
|
|
.ftue-box.instructions
|
|
%ul
|
|
%li Select audio interface for inputs and outputs.
|
|
%li Check input ports to which you will connect instruments or mics.
|
|
%li Check output ports you will use to monitor.
|
|
%li Configure interface settings.
|
|
%li View test results.
|
|
.center
|
|
%a.button-orange.watch-video.audio-input{href:'#', rel:'external'}
|
|
WATCH VIDEO
|
|
%br
|
|
%span.video-type (FOR INPUT DEVICE)
|
|
%a.button-orange.watch-video.audio-output{href:'#', rel:'external'}
|
|
WATCH VIDEO
|
|
%br
|
|
%span.video-type (FOR OUTPUT DEVICE)
|
|
.wizard-step-column
|
|
%h2 Audio Input Device
|
|
%select.w100.select-audio-input-device
|
|
%option None
|
|
%h2.audio-channels Audio Input Ports
|
|
.ftue-box.list.ports.input-ports
|
|
%a.button-orange.asio-settings-input-btn ASIO SETTINGS...
|
|
%a.button-orange.resync-btn RESYNC
|
|
%div.resync-status
|
|
%span.resynctext RESYNCING...
|
|
%span.spinner-small
|
|
.wizard-step-column
|
|
%h2 Audio Output Device
|
|
%select.w100.select-audio-output-device
|
|
%option Same as input
|
|
%h2.audio-channels Audio Output Ports
|
|
.ftue-box.list.ports.output-ports
|
|
.sample-rate
|
|
%h2.sample-rate-header Sample Rate:
|
|
= render :partial => '/clients/wizard/sample_rate'
|
|
%a.button-orange.asio-settings-output-btn ASIO SETTINGS...
|
|
= render :partial => "/clients/wizard/framebuffers"
|
|
.wizard-step-column
|
|
%h2 Test Results
|
|
= render :partial => "/clients/wizard/gear_test", locals: {test_type: 'automated'}
|
|
.clearall
|
|
|
|
.wizard-step{ 'layout-wizard-step' => "2", 'dialog-title' => "Configure Tracks", 'dialog-purpose' => "ConfigureTracks" }
|
|
.ftuesteps
|
|
.clearall
|
|
.help-text In this step, you will set up your live performance audio tracks.
|
|
.wizard-step-content.no-selection-range
|
|
.wizard-step-column
|
|
%h2 Instructions
|
|
.ftue-box.instructions
|
|
%ul
|
|
%li Edit the first audio track using the "update" link to set it up as an instrumental or vocal track as you like.
|
|
%li If desired, add other audio or MIDI tracks for other instruments or vocals.
|
|
.center
|
|
%a.button-orange.watch-video{href:'https://jamkazam.desk.com/customer/en/portal/articles/2400702-using-the-setup-wizard-%E2%80%93-step-3-%E2%80%93-configure-tracks', rel:'external'} INSTRUCTIONS
|
|
.wizard-step-column
|
|
= react_component 'ConfigureTracks', {}
|
|
|
|
.wizard-step{ 'layout-wizard-step' => "3", 'dialog-title' => "Configure Voice Chat", 'dialog-purpose' => "ConfigureVoiceChat" }
|
|
.ftuesteps
|
|
.clearall
|
|
.help-text In this step, you may set up a microphone to use for voice chat. Please watch the video for best instructions.
|
|
.wizard-step-content
|
|
.wizard-step-column
|
|
%h2 Instructions
|
|
.ftue-box.instructions
|
|
%p Determine if you need to set up a voice chat input.
|
|
%p If you do, then assign the audio input to use to capture voice chat.
|
|
.center
|
|
%a.button-orange.watch-video{href:'https://www.youtube.com/watch?v=f7niycdWm7Y', rel:'external'} WATCH VIDEO
|
|
.wizard-step-column
|
|
%h2.sub-header Select Voice Chat Option
|
|
%form.voice
|
|
.voicechat-option.reuse-audio-input
|
|
%input{type:"radio", name: "voicechat", checked:"checked"}
|
|
%h3 Use Music Microphone
|
|
%p I am already using a microphone to capture my vocal or instrumental music, so I can talk with other musicians using that microphone
|
|
.voicechat-option.use-chat-input
|
|
%input{type:"radio", name: "voicechat"}
|
|
%h3 Use Chat Microphone
|
|
%p I am not using a microphone for acoustic instruments or vocals, so use the input selected to the right for voice chat during my sessions
|
|
.clearall
|
|
// .wizard-step-column
|
|
%h2.sub-header.voice-chat-header Voice Chat Input
|
|
.ftue-box.chat-inputs
|
|
.vu-meter
|
|
.ftue-controls
|
|
.ftue-vu-left.voice-chat-vu-left
|
|
.ftue-fader.chat-fader
|
|
.gain-label GAIN
|
|
.ftue-vu-right.voice-chat-vu-right
|
|
|
|
|
|
.wizard-step{ 'layout-wizard-step' => "4", 'dialog-title' => "Turn Off Direct Monitoring", 'dialog-purpose' => "DirectMonitoring" }
|
|
.ftuesteps
|
|
.clearall
|
|
.help-text In this step, you will ensure that any direct monitoring control on your audio interface is turned off. Please watch the video for best instructions.
|
|
.wizard-step-content
|
|
.wizard-step-column
|
|
%h2 Instructions
|
|
.ftue-box.instructions
|
|
%p Find the Direct Monitoring control on your audio interface.
|
|
%ul
|
|
%li If a button, push it into its off position.
|
|
%li If a knob, turn it so that 100% of audio is from your computer, and 0% is from the direct monitor.
|
|
%li
|
|
= "If audio is poor try "
|
|
%a.adjust-settings-direct-monitor{'href'=>'#'}tweaking your settings
|
|
.center
|
|
%a.button-orange.watch-video{href:'https://www.youtube.com/watch?v=-nC-D3JBHnk', rel:'external'} WATCH VIDEO
|
|
.wizard-step-column
|
|
.help-content
|
|
When you have fully turned off the direct monitoring control (if any) on your audio interface,
|
|
please click the Play button below. If you hear the audio clearly, then your settings are correct,
|
|
and you can move ahead to the next step.
|
|
If you use your audio interface for recording, and use the direct monitoring feature for recording,
|
|
please note that you will need to remember to turn this feature off every time that you use the JamKazam service.
|
|
.center
|
|
%a.ftue-box.test-direct-monitoring.paused.no-selection-range
|
|
.playing
|
|
%img{src:'assets/content/icon_pausebutton.png', width:20, height:20, align:'top'}
|
|
%span.direct-monitoring-btn Pause
|
|
.paused
|
|
%img{src:'assets/content/icon_playbutton.png', width:20, height:20, align:'top'}
|
|
%span.direct-monitoring-btn Play
|
|
|
|
-step=4
|
|
-if (Rails.application.config.video_available && Rails.application.config.video_available!="none")
|
|
.wizard-step.video-gear{ 'layout-wizard-step' => "#{step+=1}", 'dialog-title' => "Set Up Video Gear", 'dialog-purpose' => "SelectVideoGear" }
|
|
.ftuesteps
|
|
.clearall
|
|
= render :partial => '/clients/wizard/gear/video_gear'
|
|
-if (Rails.application.config.network_test_required)
|
|
.wizard-step.network-test{ 'layout-wizard-step' => "#{step+=1}", 'dialog-title' => "Test Router & Network", 'dialog-purpose' => "TestRouterNetwork" }
|
|
.ftuesteps
|
|
.clearall
|
|
= render :partial => '/clients/network_test'
|
|
|
|
.wizard-step.success{ 'layout-wizard-step' => "#{step+=1}", 'dialog-title' => "Success!", 'dialog-purpose' => "Success" }
|
|
.ftuesteps
|
|
.clearall
|
|
.wizard-step-content
|
|
.wizard-step-column
|
|
%p Congratulations! You are now ready to create, join, and play in online sessions with other JamKazam musicians!
|
|
%p Please feel free to watch any of the videos to the right for information on how to connect and play with other musicians, and how to get the most out of JamKazam. When you're ready to go, click the Close button.
|
|
%p Have fun and thanks for joining us!
|
|
%p — Team JamKazam
|
|
.wizard-step-column
|
|
%h2 Tutorial Videos
|
|
%ul
|
|
%li
|
|
%a{href: 'https://www.youtube.com/watch?v=EZZuGcDUoWk', rel: 'external'} Creating a Session
|
|
%li
|
|
%a{href: 'https://www.youtube.com/watch?v=xWponSJo-GU', rel: 'external'} Finding a Session
|
|
%li
|
|
%a{href: 'https://www.youtube.com/watch?v=zJ68hA8-fLA', rel: 'external'} Playing in a Session
|
|
%li
|
|
%a{href: '#'} Connecting with Other Musicians
|
|
%li
|
|
%a{href: '#'} Making and Sharing Recordings
|
|
%li
|
|
%a{href: '#'} Broadcasting Your Sessions
|
|
%h2 Other Valuable Resource Links
|
|
%ul
|
|
%li
|
|
%a{href: 'https://jamkazam.desk.com/', rel: 'external'} JamKazam Support Center
|
|
%li
|
|
%a{href: 'http://forums.jamkazam.com', rel: 'external'} JamKazam Community Forum
|
|
.wizard-buttons
|
|
|
|
%script{type: 'text/template', id: 'template-ftuesteps'}
|
|
.ftuesteps-inner
|
|
%a.ftue-stepnumber{'data-step-number' => 0} 1
|
|
.ftue-step-title Understand Your Gear
|
|
%a.ftue-stepnumber{'data-step-number' => 1} 2
|
|
.ftue-step-title Select & Test Audio Gear
|
|
%a.ftue-stepnumber{'data-step-number' => 2} 3
|
|
.ftue-step-title Configure Tracks
|
|
%a.ftue-stepnumber{'data-step-number' => 3} 4
|
|
.ftue-step-title Configure Voice Chat
|
|
%a.ftue-stepnumber{'data-step-number' => 4} 5
|
|
.ftue-step-title Turn Off Direct Monitoring
|
|
-step = 4
|
|
-if (Rails.application.config.video_available && Rails.application.config.video_available!="none")
|
|
%a.ftue-stepnumber{'data-step-number' => step+=1}=step+1
|
|
.ftue-step-title Select Video Gear
|
|
-if (Rails.application.config.network_test_required)
|
|
%a.ftue-stepnumber{'data-step-number' => step+=1}=step+1
|
|
.ftue-step-title Test Router & Network
|
|
%a.ftue-stepnumber{'data-step-number' => step+=1}=step+1
|
|
.ftue-step-title Success!
|
|
|
|
|
|
%script{type: 'text/template', id: 'template-wizard-buttons'}
|
|
.wizard-buttons-holder
|
|
%a.button-grey.btn-cancel{href:'#', 'layout-action' => 'close'} CANCEL
|
|
%a.button-grey.btn-help{href: '#'} HELP
|
|
%a.button-orange.btn-back{href:'#'} BACK
|
|
%a.button-orange.btn-next{href:'#'} NEXT
|
|
%a.button-orange.btn-close{href:'#', 'layout-action' => 'close'} CLOSE
|
|
|
|
%script{type: 'text/template', id: 'template-audio-port'}
|
|
.audio-port
|
|
%input{ type: 'checkbox', 'data-id' => '{{data.id}}' }
|
|
%span
|
|
= '{{data.name}}'
|
|
|
|
%script{type: 'text/template', id: 'template-assignable-port'}
|
|
.ftue-input{'data-input-id' => '{{data.id}}', 'data-direction' => '{{data.direction}}'} {{data.name}}
|
|
|
|
%script{type: 'text/template', id: 'template-track-target'}
|
|
.track{'data-num' => '{{data.num}}'}
|
|
.num {{data.num + 1}}:
|
|
.track-target.target{'data-num' => '{{data.num}}', 'track-count' => 0}
|
|
%span.placeholder None
|
|
|
|
|
|
%script{type: 'text/template', id: 'template-output-target'}
|
|
.output{'data-num' => '{{data.num}}'}
|
|
.num {{data.num + 1}}:
|
|
.output-target.target{'data-num' => '{{data.num}}', 'output-count' => 0}
|
|
%span.placeholder None
|
|
|
|
|
|
%script{type: 'text/template', id: 'template-chat-input'}
|
|
.chat-input
|
|
%input{type:"radio", name: "chat-device", 'data-channel-id' => '{{data.id}}', 'data-channel-name' => '{{data.name}}'}
|
|
%p
|
|
%span {{data.name}}
|
|
|
|
|
|
%script{type: 'text/template', id: 'template-device-not-valid'}
|
|
.device-not-valid
|
|
%p It appears this audio configuration is not valid. Specifically:
|
|
= '{% if (data.specific_errors.length > 0) { %}'
|
|
%ul
|
|
= '{% window._.each(data.specific_errors, function(msg) { %}'
|
|
%li
|
|
= '{{msg}}'
|
|
= '{% }) %}'
|
|
= '{% } %}'
|
|
%p To try and remedy this yourself, there are multiple things you can try:
|
|
= '{% if (data.specific_errors.length > 0) { %}'
|
|
%ul
|
|
= '{% window._.each(data.specific_resolutions, function(msg) { %}'
|
|
%li
|
|
= '{{msg}}'
|
|
= '{% }) %}'
|
|
= '{% } %}'
|