how to play audio in elm

Question

I am getting some data from my api.

{
  "message":"",
  "data":[
    {
      "title":"Test Rock Song",
      "artist":"Music Artist Test",
      "audioUrl":"https://xyz/radio/03+-+HS3+-+Wajah+Tum+Ho+%5BDJMaza.Info%5D.mp3",
      "stateName":"California",
      "cityName":"Los Angles",
      "businessId":32
    },
    {
      "title":"R&B S1",
      "artist":"Music Artist Test",
      "audioUrl":"https://xyz/radio/1463469171175_Ba_khuda_tumhi.mp3",
      "stateName":"California",
      "cityName":"Los Angles",
      "businessId":32
    },
    {
      "title":"R&B S2",
      "artist":"Music Artist Test",
      "audioUrl":"https://xyz/radio/1465890934054_01+-+HS3+-+Tumhe+Apna+Banane+Ka+%5BDJMaza.Info%5D.mp3",
      "stateName":"California",
      "cityName":"Los Angles",
      "businessId":32
    }
  ],
  "count":3
}

So i have iterate that data in list, each have one mp3 url. I want when i click on link then particular mp3 will play.

Please any one help me to implement this feature.

Answer 1

If you are looking for the simplest of solutions, I would recommend rendering <audio> tags with the src attribute set to the audio URL. This can give you standard audio controls. Here is a full example along with some JSON decoders:

import Html exposing (..)
import Html.Attributes exposing (..)
import Json.Decode as Json

main =
  case Json.decodeString myDecoder exampleJsonInput of
    Err err -> text err
    Ok data -> div [] <| List.map toAudioBlock data

toAudioBlock entry =  
  div []
    [ div [] [ strong [] [ text entry.title ] ]
    , div [] [ text "By: ",  text entry.artist ]
    , div [] (List.map text ["From: ",  entry.cityName, ", ", entry.stateName])
    , audio
      [ src entry.audioUrl
      , controls True
      ] []
    ]

type alias Entry =
  { title : String
  , artist : String
  , audioUrl : String
  , stateName : String
  , cityName : String
  , businessId : Int
  }

entryDecoder : Json.Decoder Entry
entryDecoder =
  Json.map6
    Entry
    (Json.field "title" Json.string)
    (Json.field "artist" Json.string)
    (Json.field "audioUrl" Json.string)
    (Json.field "stateName" Json.string)
    (Json.field "cityName" Json.string)
    (Json.field "businessId" Json.int)

myDecoder : Json.Decoder (List Entry)
myDecoder =
  Json.at ["data"] <| Json.list entryDecoder

exampleJsonInput =
  """
    {
      "message":"",
      "data":[
        {
          "title":"Test Rock Song",
          "artist":"Music Artist Test",
          "audioUrl":"https://archive.org/download/SuperMarioBros.ThemeMusic/SuperMarioBros.mp3",
          "stateName":"California",
          "cityName":"Los Angles",
          "businessId":32
        },
        {
          "title":"R&B S1",
          "artist":"Music Artist Test",
          "audioUrl":"http://216.227.134.162/ost/super-mario-bros.-1-3-anthology/pnfhmccstp/1-02-underworld.mp3",
          "stateName":"California",
          "cityName":"Los Angles",
          "businessId":32
        },
        {
          "title":"R&B S2",
          "artist":"Music Artist Test",
          "audioUrl":"https://ia800504.us.archive.org/33/items/TetrisThemeMusic/Tetris.mp3",
          "stateName":"California",
          "cityName":"Los Angles",
          "businessId":32
        }
      ],
      "count":3
    }
  """

You can paste this into http://elm-lang.org/try. I have substituted your audio examples with actual mp3s from the internet.

If instead you are looking for a complete audio library port to Elm, there is currently no version compatible with Elm 0.17.