Ir para conteúdo
Pitag346

Audio Streaming

Recommended Posts

Olá pessoal, beleza? 

Estou com um pequeno problema...

Tenho um servidor streaming onde toca alguns audios, mas não é sempre que o navegador executa o audio, como assim ?

Tipo as vezes eu acesso o site e toca normalmente o que está na tag <audio> ... Mas as vezes eu acesso e não toca...

Sei que consigo sanar isso com javascript ou jquery, mas não tenho esse conhecimento.

OBS: O problema não é meu servidor pq se eu acessa-lo diretamente ele funciona sem parar em nenhum momento. 

 

Meu código html:

 

<audio id="audio" autoplay="autoplay">
<source src="https://streaming.meuservidor.com.br/;" type="audio/mpeg" />
<source src="https://streaming.meuservidor.com.br/stream.ogg" type="audio/ogg" />
</audio>

Um detalhe importante, mesmo quando estava com somente 1 source src, acontecia isso, pensei q era culpa da velocidade da conexão mas não é acredito eu.

Obrigado amigos.

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

tenta adiciona preload ="none"

<audio id="audio" preload = "none" autoplay="autoplay">
<source src="https://streaming.meuservidor.com.br/;" type="audio/mpeg" />
<source src="https://streaming.meuservidor.com.br/stream.ogg" type="audio/ogg" />
</audio>
  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por VCastilho
      Bom Dia

      Desenvolvi um filtro HTML e estou com dificuldades em criar o JavaScript para o funcionamento do mesmo, poderiam em ajudar a criar esse JS?
      Segue o código:
       
      <div id = "filtro"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style disabled> #filtro { border-style:double; } #button1 { width: 120px; position: inherit; right: 10px; background-color: #e00505; font-size: 12px; FLOAT: right } h4 { font-size: 18px; border-style: inset; } select { border: 1px solid #000; box-sizing: border-box; width: 124px; border-radius: 5px; height: 25px; padding: 3px; } section label { width: calc(100% / 4); color: red; text-align: center; } section { display: flex; flex-wrap: wrap; } h4/ { border-style:double; } @media screen and (max-width:768px) { section label { margin-bottom: 20px; width: 100%; } } </style> <h4 style="text-align: center;">Personalize o seu Kit de Segurança</h4><br><br> <form action="#" id="form"> <section> <label> <b> Tipo do seu Kit </b><br> <select name="speed" id="speed" style=" "> <option desable>Selecione</option> <option>Residencial</option> <option>Comercial</option> </select> </label> <label> <b>Qualidade de Seu Kit</b><br> <select name="files" id="files" style=" "> <option desable> Selecione </option> <option value="HD">HD</option> <option value="Full HD">Full HD</option> <option value="Analógica">Analógica</option> </select> </label> <label> <b> Quantidade de Câmeras </b><br> <select name="number" id="number" style=" "> <option desable> Selecione </option> <option>1 Câmera</option> <option>2 Câmeras</option> <option>3 Câmeras</option> <option>4 Câmeras</option> <option>5 Câmeras</option> <option>6 Câmeras</option> <option>7 Câmeras</option> <option>8 Câmeras</option> <option>9 Câmeras</option> <option>10 Câmeras</option> <option>11 Câmeras</option> <option>12 Câmeras</option> <option>13 Câmeras</option> <option>14 Câmeras</option> <option>15 Câmeras</option> <option>16 Câmeras</option> </select> </label> <label> <b> Selecione a Marca </b><br> <select name="salutation" id="salutation"> <option desable selected>Selecione</option> <option>Intelbras</option> <option>Hikvision</option> <option>Outras</option> </select> </label> </section> <BR> <BR> </form> </div> <br> <br> <button class="kd-filter-button" id="button1">Ver resultados</button> Seria bom, se possível o botão funcionar fora da tag "form" pois para personalizar fica melhor

       
    • Por jaquelss
      Estava fazendo download de coisas que uso no trabalho, mas parece que esqueci de algo. Sempre dá esse erro, mas tecnicamente parece que tá tudo ok?
      Eu esqueci algum programa ou algo do código em si?
      Agradeço desde já.
    • Por MateusOFCZ
      Olá, estou desenvolvendo um BOT utilizando java, javascript e node.js, gostaria de saber se tem como eu fazer um painel em java (arquivo executável) onde tem um campo de texto (Que é digitado um tema, exemplo "Brasil"), uma lista com 3 itens (Quem é, O que é e A história do(a), você iria selecionar, por exemplo no campo de texto você digitou "Brasil" e na lista você selecionaria "A história do(a)"...) como faço pra quando clicar no botão "Enviar" ele iria executar um comando em node.js adicionando as informações (Tema e Opção).

       


      Caso não tenha entendido posso tentar explicar de uma forma mais clara!
    • Por Gustavo2503
      Eu estou criando uma classe que cria modais usando React, eu preciso criar um modal dentro de um modal, para isso, eu quero chamar a mesma função dentro dela mesma. O modal é criado, mas o problema é que ele não abre, abre o modal principal (#modal-1), mas não abre o sub modal (#modal-2), veja como ficou meu código:
      index.html
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modal</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="js/modal.js" type="text/babel"></script> <link rel="stylesheet" href="css/modal.css"> </head> <body> <div align="center"> <h1>Modal</h1> </div> <button type="button" data-modal="modal-1">Open Modal</button> <div id="modal-content"></div> <script type="text/babel"> const contentSub = [ <h2>Title SubModal 1</h2>, <p>SubModal</p>, <small>Rodapé submodal 1</small> ]; const idSub = "modal-2"; const content = [ <h2>Title 1</h2>, <section> <button type="button" data-modal="modal-2">Open SubModal</button> <Modal id={idSub} content={contentSub}/> </section>, <small>Rodapé 1</small> ]; const id = "modal-1"; ReactDOM.render( <Modal id={id} content={content}/>, document.getElementById('modal-content') ); </script> </body> </html> js/modal.js
      class Modal extends React.Component{ constructor(props) { super(props); this.id = this.props.id; this.backgroudColorHeader = this.props.backgroudColorHeader === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorHeader; this.textColorHeader = this.props.textColorHeader === undefined ? '#fff' : this.props.textColorHeader; this.backgroudColorBody = this.props.backgroudColorBody === undefined ? 'rgba(255, 255, 255, 1)' : this.props.backgroudColorBody; this.textColorBody = this.props.textColorBody === undefined ? '#000' : this.props.textColorBody; this.backgroudColorFooter = this.props.backgroudColorFooter === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorFooter; this.textColorFooter = this.props.textColorFooter === undefined ? '#fff' : this.props.textColorFooter; this.borderRadius = this.props.borderRadius === undefined ? '8px' : this.props.borderRadius; this.content = this.props.content === undefined ? [<h2>header content</h2>, <p>body content</p>, <p>footer content</p>] : this.props.content; this.size = this.props.size === undefined ? 3 : this.props.size; } closeModal = () => { $('#'+this.id).removeClass("show"); $('body').removeClass("overflow-hidden"); }; render(){ $(`[data-modal]`).click( function () { var id = $(this).attr("data-modal"); var el = document.getElementById(id); $(el).addClass("show"); $('body').addClass("overflow-hidden"); }); var background, text; background = this.backgroudColorHeader; text = this.textColorHeader; const transparencyBackgroundHeader = background.substring(background.length-2,background.length-1) -.1; const backgroundColorHeader = `${background.substring(0,background.length-2)}${transparencyBackgroundHeader})`; const styleColorHeader = { backgroundColor: backgroundColorHeader, color: text, borderBottom: `1px solid ${background}` }; background = this.backgroudColorBody; text = this.textColorBody; const styleColorBody = { backgroundColor: background, color: text }; background = this.backgroudColorFooter; text = this.textColorFooter; const transparencyBackgroundFooter = background.substring(background.length-2,background.length-1) -.1; const backgroundColorFooter = `${background.substring(0,background.length-2)}${transparencyBackgroundFooter})`; const styleColorFooter = { backgroundColor: backgroundColorFooter, color: text, borderTop: `1px solid ${background}` }; const styleBorderRadius = {borderRadius: this.borderRadius}; const eDivision = ['h', 'b', 'f']; const eContent = this.content; var div = []; for (var i=0;i<eContent.length;i++){ const part = eDivision[i].replace('h', 'header').replace('b', 'body').replace('f', 'footer')+"-modal"; const closeModal = i === 0 ? <span onClick={this.closeModal} className="close-modal"><i className="material-icons">close</i></span> : "" ; var style; if (i===0) style = styleColorHeader; else if (i===1) style = styleColorBody; else style = styleColorFooter; div.push(<div key={i+1} className={part} style={style}> {closeModal} {eContent[i]} </div>); } const eSize = this.size; const s = ['s', 'm-s', 'm', 'm-l', 'l']; const size = s[eSize-1]; const classModal = (size !== "s" && size !== "m-s" && size !== "m" && size !== "m-l" && size !== "l") ? 'modal-modal modal-m' : "modal-modal modal-"+size; return <div id={this.id} className={classModal}> <div className="overflow-modal"> <div className="container-modal" style={styleBorderRadius}> {div} </div> </div> </div>; } }  
    • Por VCastilho
      Boa Tarde
      Estou tentando desenvolver um Filtro Inteligente, no qual funcionaria da seguinte forma:

      Filtro 1         Filtro 2          Filtro 3          Filtro 4 
      Opção 1
      Opção 2
      Opção 3


      Ao selecionar a Opção 1 do Filtro 1 liberaria as opções do filtro 2

      Filtro 1         Filtro 2              Filtro 3          Filtro 4 
      Opção 1      Opção 1 - a     
                           Opção 1 -b
                           Opção 1 -c

      Assim escolhendo a opção do filtro 2 liberaria as opções do Filtro 3 e assim por diante
      Ao escolher a Opção 2 do Filtro 1 liberaria outras opções

      No caso preciso aplicar na plataforma da Tray, que é o de menos porém não consigo chegar ao código certo
      Estou tentando utilizar o HTML e o JQuery em conjunto para isso, conseguem me ajudar? Realmente estou perdido na situação

      Atenciosamente Vinicius Castilho
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.