CodePen view

Add hotspots with spatialized sounds to a scene.

Define your configuration.json

Place the configuration.json file at the same root path as the html

{
    "story":
    {
        "uid": "hotspots-sound-story",
        "name": "Hotspots with Spatialized Sound Story",
        "slug": "hotspots-sound-story",
        "description": "This is sample of hotspots sound spatialization",
        "default": "scene-0",

        "scenes":
        [
            {
                "uid": "scene-0",
                "name": "First scene",
                "slug": "first-scene",
                "description": "This is the first and only scene",

                "media":
                {
                    "uid": "media-0",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "rainforest-daniel-wambach.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": 160
                    },

                    "fov":
                    {
                        "min": 30,
                        "max": 120
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-3d-0",
                        "name": "Peeper Frogs Near Lake",
                        "facingCenter": true,
                        "interactive": false,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 400,
                                "theta": 135
                            },

                            "scale":
                            {
                                "x": 0.8,
                                "y": 0.8
                            }
                        },

                        "material":
                        {
                            "image": "frog-b.png",
                            "color": "#ffffff",
                            "opacity": 1,
                            "transparent": true
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "sound":
                        {
                            "uid": "hotspot-3d-0-sound",

                            "source":
                            {
                                "url": "Peeper_Frogs_Near_Lake.mp3"
                            },

                            "options":
                            {
                                "volume": { "min": 0, "max": 0.6 },
                                "loop": true,
                                "autoPlay": true,
                                "range": 210

                            }
                        }
                    },

                    {
                        "uid": "hotspot-3d-1",
                        "name": "Frogs",
                        "facingCenter": true,
                        "interactive": false,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 400,
                                "theta": -110,
                                "phi": -10
                            },

                            "scale":
                            {
                                "x": 0.8,
                                "y": 0.8
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 100,
                                "height": 100
                            }
                        },

                        "material":
                        {
                            "image": "frog-a.png",
                            "color": "#ffffff",
                            "opacity": 1,
                            "transparent": true
                        },

                        "sound":
                        {
                            "uid": "hotspot-3d-2-sound",

                            "source":
                            {
                                "url": "Frogs.mp3"
                            },

                            "options":
                            {
                                "volume": { "min": 0.2, "max": 0.8 },
                                "loop": true,
                                "startTime": 0,
                                "autoPlay": true,
                                "range": 120
                            }
                        }
                    }
                ]
            }
        ]
    }
}

Back to samples

3rd Jan 2017