如何在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

如果您正在寻找最简单的解决方案，我会建议将标记的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兼容的版本。