Question

我该如何在音频流未进行硬编码以及用户可以自己输入音频流的地方进行设置？

这是我想做的事情，但还没有弄清楚怎么做。

代码： https://jsfiddle.net/xnwr5jeq/6/

package sample

import akka.{Done}  
import akka.actor.ActorSystem  
import akka.kafka.{ConsumerSettings, Subscriptions}  
import akka.kafka.scaladsl.Consumer  
import akka.stream.{ActorMaterializer, ClosedShape, UniformFanInShape}  
import akka.stream.scaladsl.{GraphDSL, RunnableGraph, Sink, Source, ZipWith}  
import org.apache.kafka.clients.consumer.ConsumerConfig  
import org.apache.kafka.common.serialization.StringDeserializer  

import scala.concurrent.Future

object KafkaApp extends App {
  implicit val system = ActorSystem("StreamBuilder2323")
  implicit val materializer = ActorMaterializer()

  private val s1: Source[String, Consumer.Control] = initializeKafkaSource("topic1",system)
  private val s2: Source[String, Consumer.Control] = initializeKafkaSource("topic2",system)


  private val s3: Source[String, Consumer.Control] = initializeKafkaSource("topic3",system)

  private val s4:Source[String, Consumer.Control] = initializeKafkaSource("topic4",system)


  val concat = GraphDSL.create() { implicit b ⇒
    val zip = b.add(ZipWith[String,String,String](concatFunc _))
    UniformFanInShape(zip.out, zip.in0, zip.in1)
  }

  def concatFunc(s1:String, s2:String): String ={
    s1 + " _ " + s2
  }

  def printss(s:String): Unit ={
    print(s)
  }


  val sinkFinal = Sink.foreach(printss)

  val g = RunnableGraph.fromGraph(GraphDSL.create(sinkFinal) { implicit b ⇒     sink ⇒
    import GraphDSL.Implicits._
    val pm1 = b.add(concat)
    val pm2 = b.add(concat)
    val pmf = b.add(concat)
    s1  ~> pm1.in(0)
    s2  ~> pm1.in(1)

    s3  ~> pm2.in(0)
    s4  ~> pm2.in(1)

    pm1.out ~> pmf.in(0)
    pm2.out ~> pmf.in(1)

    pmf.out ~> sink.in

    ClosedShape
  })

  val max: Future[Done] = g.run()

  def initializeKafkaSource(topicName : String, system : ActorSystem): Source[String,Consumer.Control] ={
    val consumerSettings = ConsumerSettings(system, new StringDeserializer, new StringDeserializer)
      .withBootstrapServers("localhost:9092")
      .withGroupId("consumerGroup")
      .withProperty(ConsumerConfig.AUTO_OFFSET_RESET_CONFIG, "earliest")

    val subscription = Subscriptions.topics(topicName)
    val streamSource = Consumer.plainSource(consumerSettings, subscription).map(s => s.value())
    streamSource
  }
}

Image

Answer 1

首先，让我们将其设置为表格。表单是封装输入框集合的标准方法。普通的浏览器，屏幕阅读器和其他浏览器都很好地理解了它们。

<form>
  <label>
    Stream
    <input name="url" type="url" />
  </label>
</form>

这与您拥有的类似，但是我做了一些更改：

<label>元素需要包装它们所标记的内容，或者需要for属性。否则，它们不是很有用。
我放弃了label类。您可以通过简单地使用label作为选择器来在CSS中为其设置样式。
我为input设置了一个名称，以便以后更容易获取其值。
input现在的类型为url。它具有一些built-in validation，如果浏览器不支持，则会退回到常规的text输入。

您的audio元素很好，但让我们对其进行一些重新设计：

<audio src=""></audio>

基本上，由于我们仅从用户那里获得单个URL，因此不需要子source元素。我们也不应该设置type，因为我们不知道它会是什么。

现在，直接回答您的问题...我们使用JavaScript处理表单提交。

// Ensure the page is loaded before querying for elements to attach handlers to
document.addEventListener('DOMContentLoaded', (e) => {
  // Get the form, add a submit handler
  document.querySelector('form').addEventListener('submit', (e) => {
    // Get the form values from the form that was just submitted
    const formData = new FormData(e.target);

    // Set the audio `src` attribute from the form's `url` field input value
    document.querySelector('audio').src = formData.get('url');

    // Prevent default form handling (which would reload the page, in this case)
    e.preventDefault();
  });
});

提琴：https://jsfiddle.net/xnwr5jeq/7/

用户输入的音频流

1 个答案: