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

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