如何在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兼容的版本。