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 
} 

그래서 목록의 데이터를 반복합니다. 각각 하나의 mp3 URL이 있습니다. 내가 링크를 클릭하면 특정 mp3가 재생됩니다.

이 기능을 구현하는 데 도움을주십시오.

Answer 1

가장 간단한 솔루션을 찾고있는 경우 src 속성이 오디오 URL로 설정된 <audio> 태그를 렌더링하는 것이 좋습니다. 표준 오디오 컨트롤을 제공 할 수 있습니다.

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에이 붙여 넣을 수 있습니다 : 여기에 몇 가지 JSON 디코더와 함께 전체 예입니다. 인터넷에서 실제 mp3로 오디오 예제를 대체했습니다.

Elm에 대한 완벽한 오디오 라이브러리 포트를 찾으려면 현재 Elm 0.17과 호환되는 버전이 없습니다.