Crie músicas personalizadas e exibições de IA

Escolha a página inicial correta

Copie a exibição do público, não sua página de configuração. A configuração do Spotify vive separadamente de spotify-overlay.html; O AI Overlay Builder usa aiprompt.html para construir e aioverlay.html para exibir. AI Event Overlay é outro recurso com configurações salvas e um URL de exibição privado.

Baixe e mantenha a estrutura do arquivo

1. Baixe o ZIP de origem e extraia-o. Esses guias usam a fonte beta; mantenha os arquivos de um download juntos.
2. Copiar spotify-overlay.html como my-music.html ao lado do original. Se escolher uma página ou tema diferente, mantenha sua cópia na pasta original do arquivo.
3. Abra o HTML copiado e seu CSS/JS referenciado em seu editor ou ferramenta de IA. Adicione arte/fontes fornecidas ao mesmo projeto e use caminhos relativos. Comece com substituições de CSS; inclua o renderizador ao alterar a marcação gerada.

Os arquivos a seguir ajudam você a encontrar o design e o comportamento. Esta é uma lista de leitura, não um pacote completo de dependências: mantenha a pasta extraída intacta, incluindo imagens, fontes, scripts e quaisquer arquivos de dados.

Conecte sua cópia e abra-a em OBS

Inicie SSN e faça o URL de sobreposição gerado original funcionar primeiro. O session= conecta-se a essa sessão SSN; não é o nome do seu canal ou o nome deste arquivo. Mantenha SSN, o recurso relevante, e suas fontes de dados em execução.

1. Arraste seu arquivo HTML editado para o Chrome ou Edge. Copie seu endereço da barra de endereço; começa com file:///.
2. Copie tudo de ? em diante em seu link de sobreposição SSN de trabalho e adicione-o ao final do endereço do arquivo. Mantenha todas as configurações, incluindo a sessão, senha e qualquer # final.
3. Abra o resultado em um navegador e defina uma fonte do navegador OBS URL para o mesmo endereço com Arquivo local desmarcado. Combine as dimensões de origem com o design pretendido.

Para o arquivo inicial acima, o endereço local se parece com isto; seu link real pode conter opções adicionais obrigatórias:

file:///C:/SSN/social_stream-beta/my-music.html?session=YOUR_SESSION

Use o endereço real do arquivo em seu computador. OBS salva com a fonte; mantenha a pasta baixada no mesmo lugar. Depois de salvar as alterações de design, atualize a fonte do navegador. O guia de configuração compartilhado inclui exemplos de Mac e um iniciador opcional para a caixa de seleção Arquivo local.

Onde alterar o design

Para música, altere o enquadramento da capa, a tipografia da faixa/artista, o progresso e os estados pausado/oculto. Mantenha a autorização de reprodução na integração SSN existente. Para saída de cohost, altere o layout do avatar, o balão de fala e os estados inativo/falante, preservando o roteamento de resposta e a fonte de áudio existente.

Para designs de eventos de IA gerados, use o prompt de design salvo e esvazie data-field elementos descritos no Guia de eventos de IA. Seu renderizador preenche o texto localmente e bloqueia o JavaScript gerado. Preservar esse limite. Copie todo o link de exibição, incluindo qualquer #aieventauth=... fragmento; a sessão por si só não é suficiente para esse recurso.

Copie este prompt da IA

Forneça à IA seus arquivos de origem copiados e arte de referência. Substitua os detalhes entre colchetes. Mantenha as instruções de segurança de entrada no prompt. Este prompt é para editar arquivos de origem. Para modelos de eventos de IA gerados, use o prompt de design salvo desse recurso e texto simples data-field encadernações; não adicione scripts ao modelo gerado.

Customize my-music.html, copied from spotify-overlay.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].

Restyle [chosen music / cohost / AI output] as [design]. Preserve the existing now-playing or reply payload, hide/idle/paused states, and audio ownership. Keep provider keys and setup controls out of the viewer page. For AI Event templates preserve data-field binding and the sandbox: viewer text is data, never a design instruction or generated script.

Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server.
Return the edited files, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.

Teste este tipo de sobreposição

Use primeiro uma configuração de visualização ou teste. O guia de mensagens de teste explica como enviar cargas fictícias por meio de SSN; um teste enviado à sua sessão de produção pode acionar as automações existentes.

1. Para Spotify, dê play e pause através da integração configurada; teste um título de faixa longo, capa faltando e estado sem música.
2. Para cohost, use cohost-overlay.html?preview para layout, remova a visualização e gere uma resposta de teste por meio de SSN. Verifique transições inativas/faladas e áudio duplicado.
3. Para o construtor utilizar seus controles de simulação; para eventos de IA, use Salvar e visualizar e seus controles de eventos de amostra. Teste o link de saída real salvo em OBS, incluindo seu nome/ID e fragmento privado.

Execute também o verificações de renderização de entrada em relação aos caminhos de renderização que você alterou. Depois de salvar as edições, atualize a fonte do navegador OBS entre os ensaios e repita a interação visível. As visualizações do navegador não estabelecem captura ao vivo ou comportamento OBS.

Mais referências: Criador de overlays com IA · Coapresentador de IA · Sobreposição de eventos de IA · Referência de eventos · Solução de problemas de configuração local.