Acho que você pode recriar o elemento que compõe o nome da música, e obter sua largura em pixels. Se sua largura é maior do que a largura de seu container, você pode resolver criar um <marquee>
.
Para aplicar a recriação do elemento basta remover um dos .som
existentes, e depois puxar o novo elemento ao mesmo container.
Obs.: A largura do span está sendo quebrada pelo próprio container, impedindo a comparação de sua largura com a de seu container. Algum estilo resolveria isso.
Lembrando que não é preciso re-criar o elemento marquee/span.
Exemplo de como pré-armazenar o marquee/span:
var span = document.createElement('span');
span.className = 'som';
/* Desaplica a largura fixa de 300px: */
span.width = 'auto';
var marquee = document.createElement('marquee');
marquee.className = 'som';
Exemplo de como atualizar o nome da música:
/* Remove o marquee por precaução: */
marquee.remove();
var nomeDaMúsica = 'Nome da música';
var container = document.querySelector(
'.player .caixa-status'
);
span.textContent = nomeDaMúsica;
// Para obter a largura renderizada do span vai ser necessário
// adicioná-lo ao container (obs.: se ele já estiver adicionado
// ele não duplica, de acordo com meu navegador):
container.appendChild(span);
var largura = som.offsetWidth;
if (largura > container.offWidth) {
/* Transforma o elemento span em marquee: */
span.remove();
marquee.textContent = nomeDaMúsica;
container.appendChild(marquee);
}