Peppa Pig Episode Creator
About this app
Create your own fun Peppa Pig episodes with characters, scenes, and dialogues!
Peppa Pig Episode Creator Peppa Pig Episode Creator Episode Title: Scene: Dialogue: Add Episode Drag Characters Here: Start Recording Episode List
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Peppa Pig Episode Creator</title>
<meta name="description" content="Create your own fun Peppa Pig episodes with characters, scenes, voice recording, and dialogues!">
<meta name="keywords" content="Peppa Pig, episode creator, voice recording, cartoon, children, stories, fun, interactive, creativity">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<style>
body {
background: linear-gradient(135deg, #f3ec78, #af4261);
color: #444;
font-family: 'Comic Sans MS', cursive, sans-serif; /* Fun font choice! */
}
#main-container {
margin-top: 20px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
h1 {
color: #f39c12;
}
.btn-custom {
background-color: #e74c3c;
color: white;
}
.btn-custom:hover {
background-color: #c0392b;
}
.character {
width: 50px;
margin: 10px;
cursor: grab;
}
#character-select {
display: none;
}
#character-area {
border: 1px dashed #ccc;
height: 150px;
padding: 10px;
margin: 10px 0;
position: relative;
}
.voice-recording {
margin-top: 20px;
}
.list-group-item {
background: #fdfdfd;
border: 1px solid #eaeaea;
}
</style>
<script type="text/javascript">
let episodes = []
let mediaRecorder
let audioChunks = []
document.addEventListener("DOMContentLoaded", function () {
const addEpisodeButton = document.getElementById("add-episode");
const episodeList = document.getElementById("episode-list");
const titleInput = document.getElementById("episode-title");
const sceneInput = document.getElementById("scene");
const dialogInput = document.getElementById("dialogue");
const recordButton = document.getElementById("record");
const characterArea = document.getElementById("character-area");
// Configure drag and drop
characterArea.ondragover = (e) => e.preventDefault();
characterArea.ondrop = handleDropCharacter;
document.querySelectorAll('.character').forEach(character => {
character.ondragstart = dragStart;
});
addEpisodeButton.addEventListener("click", logicAddEpisode);
async function logicAddEpisode() {
const episodeTitle = titleInput.value.trim();
const scenery = sceneInput.value.trim();
const dialogue = dialogInput.value.trim();
if (episodeTitle && scenery && dialogue) {
const episode = {
title: episodeTitle,
scene: scenery,
dialogue: dialogue,
audio: audioChunks
};
episodes.push(episode);
updateEpisodeList();
clearInputs();
} else {
alert("Please fill in all fields!");
}
}
function updateEpisodeList() {
episodeList.innerHTML = '';
episodes.forEach((ep, index) => {
const li = document.createElement("li");
li.className = "list-group-item";
const audioURL = URL.createObjectURL(new Blob(ep.audio));
li.innerHTML = `<strong>${ep.title}</strong> in ${ep.scene}: "${ep.dialogue}" <audio controls src="${audioURL}"></audio>`;
episodeList.appendChild(li);
});
}
function clearInputs() {
titleInput.value = '';
sceneInput.value = '';
dialogInput.value = '';
audioChunks = [];
}
function dragStart(e) {
e.dataTransfer.setData("text/plain", e.target.id);
}
function handleDropCharacter(e) {
e.preventDefault();
const characterId = e.dataTransfer.getData("text/plain");
const character = document.getElementById(characterId);
characterArea.appendChild(character.cloneNode());
// Enable recording on drop
startRecording();
}
async function startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => {
audioChunks.push(event.data);
};
mediaRecorder.start();
recordButton.textContent = "Stop Recording";
recordButton.onclick = function () {
mediaRecorder.stop();
recordButton.textContent = "Start Recording";
};
mediaRecorder.onstop = function () {
const audioURL = URL.createObjectURL(new Blob(audioChunks));
audioChunks = [];
};
}
});
</script>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center">Peppa Pig Episode Creator</h1>
<div class="form-group">
<label for="episode-title">Episode Title:</label>
<input type="text" class="form-control" id="episode-title" placeholder="Enter episode title">
</div>
<div class="form-group">
<label for="scene">Scene:</label>
<input type="text" class="form-control" id="scene" placeholder="Describe the scene">
</div>
<div class="form-group">
<label for="dialogue">Dialogue:</label>
<input type="text" class="form-control" id="dialogue" placeholder="Enter dialogue">
</div>
<button id="add-episode" class="btn btn-custom">Add Episode</button>
<div id="character-area" class="text-center">
<h3>Drag Characters Here:</h3>
<img id="character-peppa" class="character" draggable="true" src="https://via.placeholder.com/50?text=P" alt="Peppa Pig"/>
<img id="character-george" class="character" draggable="true" src="https://via.placeholder.com/50?text=G" alt="George Pig"/>
</div>
<div class="voice-recording text-center">
<button id="record" class="btn btn-custom">Start Recording</button>
</div>
<h3 class="mt-4">Episode List</h3>
<ul id="episode-list" class="list-group"></ul>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!