Spaces:

moustafa1-1
/

TTS2

Runtime error

App Files Files Community

Moustafa1111111111 commited on 1 day ago

Commit

7651129

1 Parent(s): 0086768

Add all application files and TTS submodule

Browse files

Files changed (15) hide show

.gitattributes +1 -0
.gitignore +8 -0
Dockerfile +85 -0
README.md +5 -4
index.html +19 -0
local_server_new.py +136 -0
requirements.txt +178 -0
runtime.txt +1 -0
script.js +38 -0
speaker_reference.wav +3 -0
start.sh +13 -0
style.css +76 -0
web/index.html +19 -0
web/script.js +38 -0
web/style.css +76 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+speaker_reference.wav filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,8 @@

+TTS/**/*.wav
+TTS/**/*.png
+TTS/**/*.gif
+TTS/**/*.exe
+TTS/new_venv1/
+__pycache__/
+*.pyc
+*.log

Dockerfile ADDED Viewed

	@@ -0,0 +1,85 @@

+FROM python:3.9-slim-buster
+# Install Git (if not already included)
+RUN apt-get update && apt-get install -y git
+# Set the working directory in the container
+WORKDIR /app
+# Copy your entire repository content (including .git, .gitmodules, TTS as a submodule pointer)
+COPY . /app/
+# Install build tools and other dependencies BEFORE submodule init
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    cmake \
+    pkg-config \
+    libblis-dev \
+    python3-venv \
+    python3-dev \
+    wget \
+    libopenblas-dev
+# Initialize and update submodules
+RUN git submodule init
+RUN git submodule update
+# Set the working directory to the TTS directory AFTER updating submodules
+WORKDIR /app/TTS
+# Set a generic architecture flag
+ENV BLIS_ARCH="generic"
+# Try to agree to the Coqui TTS license via environment variable
+ENV COQUI_TTS_AGREED=1
+# Create a virtual environment
+RUN python3 -m venv venv
+RUN . /app/venv/bin/activate
+# Install Coqui TTS requirements
+RUN pip install -r requirements.txt --timeout=300
+# Explicitly install the TTS package itself in editable mode
+RUN pip install -e . --timeout=300
+# Change working directory back to /app
+WORKDIR /app
+# Create the model directory
+RUN mkdir -p /app/models/xtts_v2
+# Download XTTS v2 model files
+RUN wget -O /app/models/xtts_v2/config.json https://huggingface.co/coqui/XTTS-v2/resolve/main/config.json?download=true
+RUN wget -O /app/models/xtts_v2/model.pth https://huggingface.co/coqui/XTTS-v2/resolve/main/model.pth?download=true
+RUN wget -O /app/models/xtts_v2/vocab.json https://huggingface.co/coqui/XTTS-v2/resolve/main/vocab.json?download=true
+RUN wget -O /app/models/xtts_v2/dvae.pth https://huggingface.co/coqui/XTTS-v2/resolve/main/dvae.pth?download=true
+RUN wget -O /app/models/xtts_v2/speakers_xtts.pth https://huggingface.co/coqui/XTTS-v2/resolve/main/speakers_xtts.pth?download=true
+# Create the audio directory if it doesn't exist
+RUN mkdir -p /app/audio
+# Copy the speaker_reference.wav file if it exists at the root
+COPY speaker_reference.wav /app/audio/speaker_reference.wav
+# Copy the web page files
+COPY web /app/web
+# Copy the application code
+COPY local_server_new.py /app/
+# Install your other dependencies (fastapi, uvicorn, bangla, etc.)
+COPY requirements.txt /app/
+RUN . /app/venv/bin/activate && pip install -r /app/requirements.txt --no-cache-dir --timeout=300
+# Create start.sh script
+RUN echo "#!/bin/bash" > start.sh && \
+    echo "source /app/venv/bin/activate" >> start.sh && \
+    echo "/app/venv/bin/python -m uvicorn local_server_new:app --host 0.0.0.0 --port 80" >> start.sh && \
+    chmod +x start.sh
+# Expose port
+EXPOSE 80
+# Run the app using the script
+CMD ["./start.sh"]

README.md CHANGED Viewed

@@ -1,11 +1,12 @@
 ---
-title: TTS2
-emoji: 💻
-colorFrom: yellow
-colorTo: indigo
 sdk: docker
 pinned: false
 license: apache-2.0
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: TTS
+emoji: 😻
+colorFrom: pink
+colorTo: purple
 sdk: docker
 pinned: false
 license: apache-2.0
+short_description: XTTS Large Language Model
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html ADDED Viewed

	@@ -0,0 +1,19 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Text to Speech</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Text to Speech</h1>
+    <textarea id="inputText" rows="5" cols="50"></textarea><br><br>
+    <button id="convertButton">Convert to Speech</button>
+    <div id="status"></div>
+    <div id="audioOutput" style="margin-top: 20px;">
+        <a id="downloadLink" href="#" download="output.wav" style="display: none;">Download Audio</a>
+        <audio id="audioPlayer" controls style="display: none;"></audio>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

local_server_new.py ADDED Viewed

	@@ -0,0 +1,136 @@

+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+import logging
+import torch
+import os
+from TTS.api import TTS
+from transformers import AutoTokenizer, AutoModelForSequenceClassification, pipeline
+from langdetect import detect
+# Allowlist XttsConfig so torch.load doesn't raise UnpicklingError
+from torch.serialization import add_safe_globals
+from TTS.tts.configs.xtts_config import XttsConfig
+add_safe_globals([XttsConfig])
+# ✅ Monkey-patch torch.load to always use weights_only=False
+_original_torch_load = torch.load
+def patched_torch_load(*args, **kwargs):
+    kwargs["weights_only"] = False
+    return _original_torch_load(*args, **kwargs)
+torch.load = patched_torch_load
+logging.basicConfig(level=logging.DEBUG)
+# Initialize FastAPI
+app = FastAPI()
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+# Load TTS model from local files
+try:
+    model_dir = "/app/models/xtts_v2"
+    config_path = os.path.join(model_dir, "config.json")
+    # When providing config_path, TTS might expect the directory for model_path
+    tts = TTS(model_path=model_dir, config_path=config_path).to("cuda" if torch.cuda.is_available() else "cpu")
+    print("XTTS v2 model loaded successfully from local files.")
+except Exception as e:
+    print(f"Error loading XTTS v2 model from local files: {e}")
+    print("Falling back to loading by model name (license might be required).")
+    tts = TTS("tts_models/multilingual/multi-dataset-xtts_v2").to("cuda" if torch.cuda.is_available() else "cpu")
+# Load sentiment models
+arabic_model_name = "aubmindlab/bert-base-arabertv02-twitter"
+sentiment_tokenizer = AutoTokenizer.from_pretrained(arabic_model_name)
+sentiment_model = AutoModelForSequenceClassification.from_pretrained("UBC-NLP/MARBERT")
+sentiment_analyzer = pipeline("sentiment-analysis", model="distilbert-base-uncased-finetuned-sst-2-english")
+# Input class for POST body
+class Message(BaseModel):
+    text: str
+# Language detection
+def detect_language_safely(text):
+    try:
+        if any('\u0600' <= c <= '\u06FF' for c in text):
+            return "ar"
+        return detect(text)
+    except:
+        return "ar" if any('\u0600' <= c <= '\u06FF' for c in text) else "en"
+# Sentiment to emotion mapping
+def map_sentiment_to_emotion(sentiment, language="en"):
+    if language == "ar":
+        return "happy" if sentiment == "positive" else "sad" if sentiment == "negative" else "neutral"
+    return "happy" if "positive" in sentiment.lower() else "sad" if "negative" in sentiment.lower() else "neutral"
+# Simple Arabic sentiment analysis
+def arabic_sentiment_analysis(text):
+    pos_words = ["سعيد", "فرح", "ممتاز", "رائع", "جيد", "حب", "جميل", "نجاح", "أحسنت", "شكرا"]
+    neg_words = ["حزين", "غاضب", "سيء", "فشل", "خطأ", "مشكلة", "صعب", "لا أحب", "سخيف", "مؤسف"]
+    pos_count = sum(1 for word in pos_words if word in text.lower())
+    neg_count = sum(1 for word in neg_words if word in text.lower())
+    if pos_count > neg_count:
+        return "positive"
+    elif neg_count > pos_count:
+        return "negative"
+    else:
+        try:
+            inputs = sentiment_tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128)
+            outputs = sentiment_model(**inputs)
+            sentiment_class = torch.argmax(outputs.logits).item()
+            return ["negative", "neutral", "positive"][sentiment_class]
+        except:
+            return "neutral"
+# Main TTS endpoint
+@app.post("/text-to-speech/")
+def text_to_speech(msg: Message):
+    text = msg.text
+    language = detect_language_safely(text)
+    emotion = "neutral"
+    if language == "en":
+        try:
+            sentiment_result = sentiment_analyzer(text)[0]
+            emotion = map_sentiment_to_emotion(sentiment_result["label"])
+        except:
+            pass
+    else:
+        try:
+            sentiment_result = arabic_sentiment_analysis(text)
+            emotion = map_sentiment_to_emotion(sentiment_result, language="ar")
+        except:
+            pass
+    output_filename = "output.wav"
+    try:
+        tts.tts_to_file(
+            text=text,
+            file_path=output_filename,
+            emotion=emotion,
+            speaker_wav="/app/audio/speaker_reference.wav", # Updated path
+            language=language
+        )
+        return {
+            "status": "success",
+            "audio_file": output_filename,
+            "url": "/audio"
+        }
+    except Exception as e:
+        return {"status": "error", "message": str(e)}
+# ✅ Serve the audio file
+@app.get("/audio")
+def get_audio():
+    return FileResponse("output.wav", media_type="audio/wav", filename="output.wav")
+# Serve static files (your web page) from the 'web' directory
+app.mount("/", StaticFiles(directory="web", html=True), name="static")

requirements.txt ADDED Viewed

	@@ -0,0 +1,178 @@

+# core deps
+numpy==1.22.0;python_version<="3.10"
+numpy>=1.24.3;python_version>"3.10"
+cython>=0.29.30
+scipy>=1.11.2
+langdetect
+torch>=2.1
+torchaudio==2.6.0
+soundfile>=0.12.0
+librosa>=0.10.0
+scikit-learn>=1.3.0
+numba==0.55.1;python_version<"3.9"
+numba>=0.57.0;python_version>="3.9"
+inflect>=7.5.0
+tqdm>=4.67.1
+anyascii>=0.3.2
+pyyaml>=6.0.2
+fsspec>=2025.3.2
+aiohttp>=3.8.1
+packaging>=24.2
+mutagen==1.47.0
+# deps for examples
+flask>=3.1.0
+# deps for inference
+pysbd>=0.3.4
+# deps for notebooks
+umap-learn>=0.5.7
+pandas>=1.4,<2.0
+# deps for training
+matplotlib>=3.8.4
+# coqui stack
+trainer>=0.0.36
+# config management
+coqpit>=0.0.17
+# chinese g2p deps
+jieba==0.42.1
+pypinyin==0.54.0
+# korean
+hangul-romanize==0.1.0
+# gruut+supported langs
+gruut[de,es,fr]==2.2.3
+gruut-ipa==0.13.0
+gruut_lang_de==2.0.1
+gruut_lang_en==2.0.1
+gruut_lang_es==2.0.1
+gruut_lang_fr==2.0.2
+# deps for korean
+jamo==0.4.1
+nltk==3.9.1
+g2pkk>=0.1.2
+# deps for bangla
+bangla==0.0.1
+bnnumerizer==0.0.2
+bnunicodenormalizer==0.1.7
+#deps for tortoise
+einops==0.8.1
+transformers==4.51.2
+#deps for bark
+encodec==0.1.1
+# deps for XTTS
+unidecode>=1.3.8
+num2words==0.5.14
+spacy[ja]>=3
+# Additional dependencies from TTS requirements
+absl-py==2.2.2
+aiohappyeyeballs==2.6.1
+aiosignal==1.3.2
+annotated-types==0.7.0
+anyio==4.9.0
+async-timeout==5.0.1
+attrs==25.3.0
+audioread==3.0.1
+babel==2.17.0
+blinker==1.9.0
+catalogue==2.0.10
+certifi==2025.1.31
+cffi==1.17.1
+charset-normalizer==3.4.1
+click==8.1.8
+cloudpathlib==0.21.0
+colorama==0.4.6
+comtypes==1.4.10
+confection==0.1.5
+contourpy==1.2.1
+cycler==0.12.1
+cymem==2.0.11
+Cython==3.0.12
+dateparser==1.1.8
+decorator==5.2.1
+docopt==0.6.2
+fastapi==0.109.2
+filelock==3.18.0
+fonttools==4.57.0
+frozenlist==1.5.0
+grpcio==1.71.0
+h11==0.14.0
+huggingface-hub==0.30.2
+idna==3.10
+importlib_metadata==8.6.1
+importlib_resources==6.5.2
+itsdangerous==2.2.0
+Jinja2==3.1.6
+joblib==1.4.2
+jsonlines==1.2.0
+kiwisolver==1.4.7
+langcodes==3.5.0
+language_data==1.3.0
+lazy_loader==0.4
+llvmlite==0.43.0
+marisa-trie==1.2.1
+Markdown==3.8
+markdown-it-py==3.0.0
+MarkupSafe==3.0.2
+mdurl==0.1.2
+more-itertools==10.6.0
+mpmath==1.3.0
+msgpack==1.1.0
+multidict==6.4.3
+murmurhash==1.0.12
+networkx==2.8.8
+num2words==0.5.14
+packaging
+pandas>=1.4,<2.0
+pillow==11.1.0
+platformdirs==4.3.7
+pooch==1.8.2
+preshed==3.0.9
+propcache==0.3.1
+protobuf==6.30.2
+psutil==7.0.0
+pycparser==2.22
+pydantic==1.10.21
+pydantic_core==2.33.1
+Pygments==2.19.1
+pynndescent==0.5.13
+pyparsing==3.2.3
+python-crfsuite==0.9.11
+python-dateutil==2.9.0.post0
+pyttsx3==2.98
+pytz==2025.2
+regex==2024.11.6
+requests==2.32.3
+rich==14.0.0
+safetensors==0.5.3
+shellingham==1.5.4
+six==1.17.0
+smart-open==7.1.0
+sniffio==1.3.1
+soxr==0.5.0.post1
+spacy-legacy==3.0.12
+spacy-loggers==1.0.5
+SpeechRecognition==3.14.2
+srsly==2.5.1
+starlette==0.36.3
+SudachiDict-core==20250129
+SudachiPy==0.6.10
+sympy==1.13.1
+tensorboard==2.19.0
+tensorboard-data-server==0.7.2
+thinc==8.3.4
+threadpoolctl==3.6.0
+tokenizers==0.21.1
+typeguard==4.4.2
+typer==0.15.2
+typing-inspection==0.4.0
+typing_extensions==4.13.2
+tzdata==2025.2
+tzlocal==5.3.1
+Unidecode==1.3.8
+urllib3==2.4.0
+uvicorn==0.34.0
+wasabi==1.1.3
+weasel==0.4.1
+Werkzeug==3.1.3
+wrapt==1.17.2
+yarl==1.19.0
+zipp==3.21.0
+# Force rebuild

runtime.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ python-3.9

script.js ADDED Viewed

	@@ -0,0 +1,38 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const convertButton = document.getElementById('convertButton');
+    const inputText = document.getElementById('inputText');
+    const statusDiv = document.getElementById('status');
+    const downloadLink = document.getElementById('downloadLink');
+    const audioPlayer = document.getElementById('audioPlayer');
+    convertButton.addEventListener('click', async () => {
+        const text = inputText.value;
+        statusDiv.textContent = 'Processing...';
+        downloadLink.style.display = 'none';
+        audioPlayer.style.display = 'none';
+        try {
+            const response = await fetch('http://localhost:5000/text-to-speech/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ text: text }),
+            });
+            const data = await response.json();
+            if (data.status === 'success') {
+                statusDiv.textContent = 'Speech generated successfully!';
+                downloadLink.href = 'http://localhost:5000' + data.url;
+                downloadLink.style.display = 'block';
+                audioPlayer.src = 'http://localhost:5000' + data.url;
+                audioPlayer.style.display = 'block';
+            } else {
+                statusDiv.textContent = `Error: ${data.message}`;
+            }
+        } catch (error) {
+            statusDiv.textContent = `Network error: ${error}`;
+        }
+    });
+});

speaker_reference.wav ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:e7fa2e3b58516ba6057ab93fa819eca83097c31a90d24e53cc6593ef384ce1f1
+size 188476

start.sh ADDED Viewed

	@@ -0,0 +1,13 @@

+#!/bin/bash
+# 1. Navigate to the application directory (where local_server_new.py is)
+cd /app
+# 2. Activate the Python virtual environment
+source venv/bin/activate
+# 3. Run the FastAPI application using Uvicorn
+#    - Bind to all interfaces (0.0.0.0)
+#    - Listen on port 80 (required by Hugging Face Spaces for HTTP)
+#    - Specify your FastAPI application module and app instance (local_server_new:app)
+uvicorn local_server_new:app --host 0.0.0.0 --port 80

style.css ADDED Viewed

	@@ -0,0 +1,76 @@

+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f4f7f6;
+    margin: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #333;
+}
+h1 {
+    color: #2c3e50;
+    margin-bottom: 30px;
+    text-align: center;
+    font-size: 2.5em;
+}
+textarea {
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 1em;
+    margin-bottom: 20px;
+    width: 80%;
+    max-width: 600px;
+    box-sizing: border-box;
+    resize: vertical; /* Allows vertical resizing */
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+button {
+    background-color: #3498db;
+    color: white;
+    padding: 12px 25px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1.1em;
+    transition: background-color 0.3s ease;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
+}
+button:hover {
+    background-color: #2980b9;
+}
+#status {
+    margin-top: 20px;
+    font-weight: bold;
+    color: #27ae60; /* Green for success, you can change for errors */
+}
+#audioOutput {
+    margin-top: 30px;
+    text-align: center;
+}
+#downloadLink {
+    display: inline-block;
+    background-color: #2ecc71;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    font-size: 1em;
+    transition: background-color 0.3s ease;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
+}
+#downloadLink:hover {
+    background-color: #27ae60;
+}
+#audioPlayer {
+    margin-top: 10px;
+}

web/index.html ADDED Viewed

	@@ -0,0 +1,19 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Text to Speech</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Text to Speech</h1>
+    <textarea id="inputText" rows="5" cols="50"></textarea><br><br>
+    <button id="convertButton">Convert to Speech</button>
+    <div id="status"></div>
+    <div id="audioOutput" style="margin-top: 20px;">
+        <a id="downloadLink" href="#" download="output.wav" style="display: none;">Download Audio</a>
+        <audio id="audioPlayer" controls style="display: none;"></audio>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

web/script.js ADDED Viewed

	@@ -0,0 +1,38 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const convertButton = document.getElementById('convertButton');
+    const inputText = document.getElementById('inputText');
+    const statusDiv = document.getElementById('status');
+    const downloadLink = document.getElementById('downloadLink');
+    const audioPlayer = document.getElementById('audioPlayer');
+    convertButton.addEventListener('click', async () => {
+        const text = inputText.value;
+        statusDiv.textContent = 'Processing...';
+        downloadLink.style.display = 'none';
+        audioPlayer.style.display = 'none';
+        try {
+            const response = await fetch('http://localhost:5000/text-to-speech/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ text: text }),
+            });
+            const data = await response.json();
+            if (data.status === 'success') {
+                statusDiv.textContent = 'Speech generated successfully!';
+                downloadLink.href = 'http://localhost:5000' + data.url;
+                downloadLink.style.display = 'block';
+                audioPlayer.src = 'http://localhost:5000' + data.url;
+                audioPlayer.style.display = 'block';
+            } else {
+                statusDiv.textContent = `Error: ${data.message}`;
+            }
+        } catch (error) {
+            statusDiv.textContent = `Network error: ${error}`;
+        }
+    });
+});

web/style.css ADDED Viewed

	@@ -0,0 +1,76 @@

+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f4f7f6;
+    margin: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #333;
+}
+h1 {
+    color: #2c3e50;
+    margin-bottom: 30px;
+    text-align: center;
+    font-size: 2.5em;
+}
+textarea {
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 1em;
+    margin-bottom: 20px;
+    width: 80%;
+    max-width: 600px;
+    box-sizing: border-box;
+    resize: vertical; /* Allows vertical resizing */
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+button {
+    background-color: #3498db;
+    color: white;
+    padding: 12px 25px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1.1em;
+    transition: background-color 0.3s ease;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
+}
+button:hover {
+    background-color: #2980b9;
+}
+#status {
+    margin-top: 20px;
+    font-weight: bold;
+    color: #27ae60; /* Green for success, you can change for errors */
+}
+#audioOutput {
+    margin-top: 30px;
+    text-align: center;
+}
+#downloadLink {
+    display: inline-block;
+    background-color: #2ecc71;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    font-size: 1em;
+    transition: background-color 0.3s ease;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
+}
+#downloadLink:hover {
+    background-color: #27ae60;
+}
+#audioPlayer {
+    margin-top: 10px;
+}