如何在榆树中播放音频

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兼容的版本.