如何在榆树中播放音频

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。我希望当我点击 link 时，特定的 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 兼容的版本。

Answer 2

我也遇到了同样的问题，线程中的其他解决方案也很好，但我认为我有一个更简单的例子。 Elm 没有纯粹的声音解决方案，因此你需要使用端口和一些javascript，如果你想使用更多纯 html 音频组件。

您可以在 Github: Elm sound by example

下找到整个示例项目

或者这里是纯榆树和html/javascript代码。

(Main.elm)

port module Main exposing (..)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)



-- MAIN


main : Program () Model Msg
main =
    Browser.element
        { init = \_ -> init
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }



-- PORTS


port playMusic : String -> Cmd msg


port stopMusic : String -> Cmd msg


port setSource : String -> Cmd msg



-- MODEL


type alias Model =
    { song : String
    }


init : ( Model, Cmd Msg )
init =
    ( { song = "" }
    , Cmd.none
    )



-- UPDATE


type Msg
    = Play
    | Stop
    | Set String


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Play ->
            ( model
            , playMusic "play"
            )

        Stop ->
            ( model
            , stopMusic "stop"
            )

        Set message ->
            ( { model | song = message }
            , setSource message
            )



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ h1 [ id "song-header" ] [ text ("Current song: " ++ model.song) ]
        , div [ Html.Attributes.class "song-holder" ]
        [ button [ onClick (Set "song1.mp3") ] [ Html.text "Song1" ]
        , button [ onClick (Set "song2.mp3") ] [ Html.text "Song2" ]
        , button [ onClick (Set "song3.wav") ] [ Html.text "Song3" ]
        ]
        , div [ Html.Attributes.class "audio-holder" ]
        [ button [ onClick Play ] [ Html.text "Play" ]
        , button [ onClick Stop ] [ Html.text "Stop" ]
        ]
    , audio [ src "./assets/sounds/song2.mp3", id "audio-player", controls True ] []
    ]

(javascript 在 index.html)

document.getElementById("audio-player").volume = 0.1;

app.ports.playMusic.subscribe(function() {
    document.getElementById("audio-player").play();
});

app.ports.stopMusic.subscribe(function() {
    document.getElementById("audio-player").pause();
});

app.ports.setSource.subscribe(function(source) {
    document.getElementById("audio-player").setAttribute("src",     "assets/sounds/" + source);
});

如何在榆树中播放音频

how to play audio in elm

api

html5-audio

elm