User:Wyn/Special Issue 25/Field Recording: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
 
(42 intermediate revisions by the same user not shown)
Line 1: Line 1:
<!DOCTYPE html>
__NOTOC__<div style="background-color: #E6F3FF; color: #000080; padding: 20px; font-family: monospace;">
<html lang="en">
=== Context===
<head>
[[File:A glove in the street of Hong Kong.jpg|thumb]]
    <meta charset="UTF-8">
<pre style="background-color: #E6F3FF; border: 0px solid #4682B4; padding: 10px;">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
___________________________________________
    <title>DVD Audio Player - Wikimedia Style</title>
/                                          \
    <style>
|  * WAN CHAI STATION SOUND:                 |
        body {
|  RHYTHMIC, LOUD, SHORT, URGENT.           |
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
|  SIDEWALK SIGNAL FOR THE VISUALLY IMPAIRED.|
            line-height: 1.6;
|  **SMOOTH RHYTHM: TIME TO CROSS.          |
            margin: 0;
|  **URGENT TONE: GREEN LIGHT ENDING.        |
            padding: 0;
|  INTRODUCED IN 2004.                       |
            background-color: #f8f9fa;
|  SYMBOLIC OF HONG KONG SOUNDSCAPE.        |
            color: #202122;
|  SHOWS CITY'S SOPHISTICATED                |
        }
|  DEVELOPMENT AND CARE FOR                  |
        .container {
|  MARGINALIZED GROUPS.                     |
            max-width: 1200px;
|  ***A SIGN OF INCLUSIVE DESIGN***          |
            margin: 0 auto;
|                                            |
            padding: 20px;
\___________________________________________/
        }
          \
        header {
          \
            background-color: #eaecf0;
             \
            border-bottom: 1px solid #a2a9b1;
            *
            padding: 20px 0;
</pre>
        }
        h1 {
            font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
            border-bottom: 1px solid #a2a9b1;
            font-size: 28px;
            font-weight: normal;
            margin: 0 0 20px 0;
            padding-bottom: 10px;
        }
        .dvd-player {
            background-color: #333;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .screen {
            background-color: #000;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        .dvd-logo {
            position: absolute;
            width: 100px;
            height: 50px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
            color: #000;
            cursor: pointer;
            user-select: none;
        }
        .controls {
            display: flex;
            justify-content: center;
            gap: 10px;
         }
        button {
            background-color: #36c;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #447ff5;
        }
        .audio-player {
            margin-top: 20px;
        }
        audio {
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
             <h1>DVD Audio Player</h1>
        </div>
    </header>
    <main class="container">
        <div class="dvd-player">
            <div class="screen" id="dvd-screen">
                <div class="dvd-logo" id="dvd-logo">DVD</div>
            </div>
            <div class="controls">
                <button id="play-pause">Play/Pause</button>
                <button id="stop">Stop</button>
            </div>
        </div>
        <div class="audio-player">
            <audio id="main-audio" controls>
                <source src="/api/placeholder/audio/main" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>
        </div>
        <audio id="logo-audio">
            <source src="/api/placeholder/audio/logo" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </main>


    <script>
        const dvdLogo = document.getElementById('dvd-logo');
        const screen = document.getElementById('dvd-screen');
        const playPauseBtn = document.getElementById('play-pause');
        const stopBtn = document.getElementById('stop');
        const mainAudio = document.getElementById('main-audio');
        const logoAudio = document.getElementById('{{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/f/f2/WanChaiStation.mp3
|style=width:100%}}');


        let x = 0;
        let y = 0;
        let xSpeed = 2;
        let ySpeed = 2;


        function moveLogo() {
            x += xSpeed;
            y += ySpeed;


            if (x + dvdLogo.offsetWidth > screen.offsetWidth || x < 0) {
===Field Record===
                xSpeed = -xSpeed;
<pre style="background-color: #E6F3FF; border: 0px solid #4682B4; padding: 10px;">
                changeLogoColor();
+---------------------------+
            }
|    .------------------.   |
            if (y + dvdLogo.offsetHeight > screen.offsetHeight || y < 0) {
|  /                    \  |
                ySpeed = -ySpeed;
|  /    +---------+      \ |
                changeLogoColor();
| |      Field Record      ||
            }
| |      +---------+      ||
|  \                      / |
|  \                    /  |
|    '------------------'  |
|                          |
| [PLAY] [PAUSE] [STOP]    |</pre>{{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/f/f2/WanChaiStation.mp3}}
<pre style="background-color: #E6F3FF; border: 0px solid #4682B4; padding: 10px;">
|                          |
+---------------------------+
</pre>


            dvdLogo.style.left = x + 'px';
            dvdLogo.style.top = y + 'px';


            requestAnimationFrame(moveLogo);
===Meta Data===
        }
<pre style="background-color: #E6F3FF; border: 0px solid #4682B4; padding: 10px;">
+---------------------------+
|    .------------------.  |
|  /                    \  |
|  /    +---------+      \ |
| |      Meta Data        ||
| |      +---------+      ||
|  \                      / |
|  \                    /  |
|    '------------------'  |
|                          |
|  [PLAY] [PAUSE] [STOP]    |
|                          |</pre>{{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/c/c1/Meta_data.mp3}} <pre style="background-color: #E6F3FF; border: 0px solid #4682B4; padding: 10px;">
|                          |
+---------------------------+
</pre>


        function changeLogoColor() {
            const randomColor = Math.floor(Math.random()*16777215).toString(16);
            dvdLogo.style.backgroundColor = "#" + randomColor;
        }


        playPauseBtn.addEventListener('click', () => {
===Memory Reload===
            if (mainAudio.paused) {
<pre style="background-color: #E6F3FF; border: 0px solid #4682B4; padding: 10px;">
                mainAudio.play();
+---------------------------+
            } else {
|    .------------------.   |
                mainAudio.pause();
|  /                    \  |
            }
|  /    +---------+      \ |
        });
| |    memory Reload      ||
| |      +---------+      ||
|  \                      / |
|  \                    /  |
|    '------------------'   |
|                          |
|  [PLAY] [PAUSE] [STOP]    |
|                          |</pre>{{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/0/06/Field-record-memory.mp3}} <pre style="background-color: #E6F3FF; border: 0px solid #4682B4; padding: 10px;">
|                          |
+---------------------------+
</pre>


        stopBtn.addEventListener('click', () => {
            mainAudio.pause();
            mainAudio.currentTime = 0;
        });


        dvdLogo.addEventListener('click', () => {
'''Song'''：
            logoAudio.currentTime = 0; // Reset audio to start
            logoAudio.play();
        });


        moveLogo();
Inspired by traffic control sound:
    </script>
 
</body>
Heung —— Roman Wilhelm
</html>
 
https://soundcloud.com/roman946/heung
 
Bad Guy —— Billie Eilish
https://www.youtube.com/watch?v=DyDfgMOUjCI&ab_channel=BillieEilishVEVO
 
 
'''Permissions'''
 
Recording - Yes
 
Meta - Yes
 
Memory - Yes
 
Song - Yes
[[Category:Field recording 2024]]

Latest revision as of 23:43, 20 September 2024

Context

A glove in the street of Hong Kong.jpg 
 ___________________________________________
/                                           \
|  * WAN CHAI STATION SOUND:                 |
|  RHYTHMIC, LOUD, SHORT, URGENT.            |
|  SIDEWALK SIGNAL FOR THE VISUALLY IMPAIRED.|
|  **SMOOTH RHYTHM: TIME TO CROSS.           |
|  **URGENT TONE: GREEN LIGHT ENDING.        |
|  INTRODUCED IN 2004.                       |
|  SYMBOLIC OF HONG KONG SOUNDSCAPE.         |
|  SHOWS CITY'S SOPHISTICATED                |
|  DEVELOPMENT AND CARE FOR                  |
|  MARGINALIZED GROUPS.                      |
|  ***A SIGN OF INCLUSIVE DESIGN***          |
|                                            |
\___________________________________________/
          \
           \
            \
             *



Field Record

 +---------------------------+
 |    .------------------.   |
 |   /                    \  |
 |  /     +---------+      \ |
 | |      Field Record      ||
 | |      +---------+       ||
 |  \                      / |
 |   \                    /  |
 |    '------------------'   |
 |                           |
 |  [PLAY] [PAUSE] [STOP]    |

 |                           |
 +---------------------------+


Meta Data

 +---------------------------+
 |    .------------------.   |
 |   /                    \  |
 |  /     +---------+      \ |
 | |       Meta Data        ||
 | |      +---------+       ||
 |  \                      / |
 |   \                    /  |
 |    '------------------'   |
 |                           |
 |  [PLAY] [PAUSE] [STOP]    |
 |                           |

 |                           |
 +---------------------------+


Memory Reload

 +---------------------------+
 |    .------------------.   |
 |   /                    \  |
 |  /     +---------+      \ |
 | |     memory Reload      ||
 | |      +---------+       ||
 |  \                      / |
 |   \                    /  |
 |    '------------------'   |
 |                           |
 |  [PLAY] [PAUSE] [STOP]    |
 |                           |

 |                           |
 +---------------------------+


Song：

Inspired by traffic control sound:

Heung —— Roman Wilhelm

https://soundcloud.com/roman946/heung

Bad Guy —— Billie Eilish https://www.youtube.com/watch?v=DyDfgMOUjCI&ab_channel=BillieEilishVEVO


Permissions

Recording - Yes

Meta - Yes

Memory - Yes

Song - Yes

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Wyn/Special_Issue_25/Field_Recording&oldid=273903"