This one: https://membrane.stream/learn/get_started_with_membrane

In general there are two ways of playing media on your website - HLS/MPEG-DASH or WebRTC.

While WebRTC is good for real-time and interactive communicate, HLS should be enough for your use case so I would start with it.

Take a look at this demo https://github.com/membraneframework/membrane_demo/tree/master/rtp_to_hls

It receives RTP stream and converts it to the HLS playlist that can be then requested via HTTP.

In your case, instead of receiving a stream via RTP you can simply read your file

Thank you mickel8 - I will try that and report back 🙂

Hello mickel8 - I think I have this almost ready through working with the examples in your GitHub
- SimplePipeline is working
- RTP TO HLS is working

I imagine my next step is to route the "Simple pipeline" to stream into the HLS playlist, so it can be requested via HTTP and then played inside the browser?

If that is correct... you have any guidance? I am properly stuck now 😄

Yeah, so instead of reading audio from the RTP stream you should try to read it from a file.  Because HLS requires AAC codec you have to decode your mp3 and encode it as AAC. I think that the final pipeline should look like this:

```
File.Source -> MP3.Decoder -> AAC.Encoder -> HLS
```

You can construct your pipeline in `handle_playing_to_prepared` or `handle_playing` callback depending on the membrane_core version. The former was removed in core 0.11.0 but because the demo example you are using still uses 0.10.0 I would stick to 0.10.0.

You can also remove parts of the pipeline responsible for processing video.

The MP3 decoder is available here https://github.com/membraneframework/membrane_mp3_mad_plugin
Version 0.13.0 should work for you

mickel8 Thank you. Another piece of the puzzle to try out. Will keep at it. undefined from the Academy has also jumped in to help 😄

Great, let us know if you have any problems/questions 🎉

Thanks mickel8 . What I have done is cloned the membrane_mp3_mad_plugin repo locally and tried to play with it. As long as I don't write any code, all the tests pass

BUT, if I copy the example that comes in the readme.md, then things start failing

```== Compilation error in file lib/membrane_mp3_mad_plugin/mad_example_pipeline.ex ==
** (CompileError) lib/membrane_mp3_mad_plugin/mad_example_pipeline.ex:10: Membrane.Element.File.Source.__struct__/1 is undefined, cannot expand struct Membrane.Element.File.Source. Make sure the struct name is correct. If the struct name exists and is correct but it still cannot be found, you likely have cyclic module usage in your code
    expanding struct: Membrane.Element.File.Source.__struct__/1
    lib/membrane_mp3_mad_plugin/mad_example_pipeline.ex:10: MadExamplePipeline.handle_init/1````

Looks like the example from mp3 wasn't updated for some time. Instead of `Membrane.Element.File.Source` you should use `Membrane.File.Source`

Take a look here  https://github.com/membraneframework/membrane_demo/blob/master/simple_pipeline/lib/membrane_demo/simple_pipeline.ex

this is a very simple example that plays mp3 in your headphones

Thank you mickel8. We'll get there 🙂 This Membrane stuff is, for now, bigger than my current brain capacity, so I need to break it down into very small bit-size pieces. Two months ago I didn't know what Elixir was and now I am trying to create pipelines and streams. I am a mess 😄 😄

Hello mickel8 I hope you started a great week. Here is where I am at. I modified the `simple_pipeline` code and added HLS to the pipeline instead of the `portaudio` of the example. I do not know yet if it works because it throws a compile error

```
== Compilation error in file lib/membrane_mp4/payloader/h264.ex ==
** (CompileError) lib/membrane_mp4/payloader/h264.ex:14: Error parsing pad specs defined in Membrane.MP4.Payloader.H264.def_input_pads/1,
reason: {{:config_field, {:invalid_value, [key: :caps, value: {Membrane.H264, [stream_format: :byte_stream, alignment: :au, nalu_in_metadata?: true]}, reason: {:invalid_keys, Membrane.H264, [:stream_format]}]}}, [pad: :input]}

    (membrane_core 0.10.2) lib/membrane/core/child/pads_specs.ex:145: Membrane.Core.Child.PadsSpecs.parse_pad_specs!/4
    lib/membrane_mp4/payloader/h264.ex:14: (module)
could not compile dependency :membrane_mp4_plugin, "mix compile" failed. Errors may have been logged above. You can recompile this dependency with "mix deps.compile membrane_mp4_plugin", update it with "mix deps.update membrane_mp4_plugin" or clean it with "mix deps.clean membrane_mp4_plugin"
```

Mind you, this compile error does not happen in the Demo HTP to HLS project.

I have tried the mix.deps.compile membrane_mp4_plugin but it throws the same compile error

BTW, these are my deps: ```
defp deps do
    [
      {:membrane_core, "~> 0.10"},
      {:membrane_file_plugin, "~> 0.12"},
      {:membrane_portaudio_plugin, "~> 0.13"},
      {:membrane_ffmpeg_swresample_plugin, "~> 0.15"},
      {:membrane_mp3_mad_plugin, "~> 0.13.0"},
      {:membrane_http_adaptive_stream_plugin, "~> 0.8"},
      {:membrane_h264_ffmpeg_plugin, "~> 0.21"},
      {:dialyxir, "~> 1.2", only: [:dev], runtime: false}
    ]
  end

```

Could you please paste the output of `mix deps.tree` command?

Hmm 🤔  Could you remove your `deps` and `_build` directories and re-run `mix deps.get && mix compile`? Also, is the source code of your app available online?

Thank you mickel8 . I have just uploaded it to https://github.com/BigSpaces/membrane_help

Appreciate your support. If I can get it to play an mp3 on a browser, then I am well on my way to completing my academy project 🙂

Try to delete your `mix.lock` file and do `mix deps.get` once again

I played with your project a little bit and here is a patch that should help you run your application

You can apply it with `git patch apply hls.patch` or adjust your project manually

It's important to create `output` directory before running the pipeline. At the end, you should be able to play `m3u8` file with ffplay e.g. `ffplay output/g1oAA2QADW5vbm9kZUBub2hvc3QAAAAAAAADLhAQAAG2KOpn.m3u8`

Unfortunately, playing `index.m3u8` (as in the example) doesn't work and I assume this is a bug related to creating HLS playlist that contains only audio 😦

I will talk with someone who is more into HLS to fix it 😉

mickel8 you are a star. Thank you very much. I will apply the patch and try what you mention. If we get the HLS to play, then my next step is to create a sequence of mp3 files and stream them as one thing.

Attempting to play 1 mp3 through a website

Unknown user

40 responses

Join out Discord Community