как играть аудио в 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-адрес. Я хочу, когда я нажму на ссылку, тогда будет воспроизводиться конкретный 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.