elmでオーディオを再生する方法

Question

私の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 
} 

だから私は、リスト内のデータを、それぞれ1つのmp3のURLを持っていることを反復しています。私はリンクをクリックすると、特定のmp3が再生されます。

この機能を実装するのにお手伝いください。

Answer 1

最も簡単なソリューションをお探しの場合は、<audio>タグのsrc属性をオーディオURLに設定することをお勧めします。これにより標準のオーディオコントロールが得られます。ここではいくつかのJSONデコーダと一緒に完全な例です：

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 
    } 
    """ 

あなたはhttp://elm-lang.org/tryにこれを貼り付けることができます。あなたのオーディオサンプルをインターネットからの実際のmp3で置き換えました。

Elmへの完全なオーディオライブラリポートを探している場合、Elm 0.17と互換性のあるバージョンは現在ありません。