كيف احل مشكلة فقدان الصوت بعد تسجيله وارساله للسيرفر

علي الكاسر · 12 يوليو 2023

السلام عليكم ورحمة الله وبركاته

لدي كود جافا سكربت يقوم بالوصول للميكرفون وتسجيل الصوت وارساله للسيرفر ولكن المشكله يتم رفع ملف الصوت ولكن عند تشغيل الملف لا يوجد هناك صوت

هذه مجلدات وملفات السكربت كامله اتمنى التعديل على الكود وحل المشكله

مجلد upload

ملف audio.html

ملف audio.php

كود ملف audio.html

<html>

<body>
<button onclick="samah();">تسجيل صوتي</button>
<button onclick="stops();">stop</button>
<br>
<a id="a"></a>
<br>
<audio style="display:none" id="audi" controls="controls" src=""></audio>

fetch("audio.php", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
if(data.aud){
alert(data.url) ;
let audi = document.getElementById("audi");
audi.src = data.url;
audi.style.display = 'block';
}else{
alert(data.error);
}
// استجابة من الخادم تحتوي على معلومات الصوت المرفوع ومعالجتها وتخزينها في قاعدة البيانات هنا
})
.catch(error => {
console.error("حدث خطأ أثناء رفع الصوت", error);
});

}

function stops() {
mediaRecorder.addEventListener("stop", () => {
audioBlob = new Blob(audioChunks, {type: mediaRecorder.mimeType});
audioUrl = URL.createObjectURL(audioBlob);

mainStream.getTracks() // get all tracks from the MediaStream
.forEach(track => track.stop()); // stop each of them

// تحميل ملف الصوت
let a = document.getElementById("a");
a.href = audioUrl;
a.download = "recording.webm";
a.innerText = 'click me to save file';
uploadAudio();
//document.body.appendChild(a);
//a.click();
});

mediaRecorder.stop();

}

</script>

</body>

</html>

كود ملف audio.php

<?php
function _file($file,$allowedExtension,$size,$folder){
global $load_error ;
$rand = array('A','a','B','b','C','c', 'D','b','E','e','F','f','G','g','J','j','K','k','L','l','H','h','S','s','V','v', 'T','t','Q','q','W','w','Y', 'y','U','u','I','i', 'O','o','P','p', 'X', 'x','N','n','M','m','R','r','Z','z');
$text = '';
for($i = 0; $i < rand(10,20); $i++){
$text = $text.$rand[rand(0,51)];
}
$fileName = $_FILES[$file]['name'];
$fileSize = $_FILES[$file]['size'];
$fileTmp = $_FILES[$file]['tmp_name'];
$fileType = $_FILES[$file]['type'];
$fileExtensions = end(explode('.',$fileName));
if(isset($fileName) and $fileName!=''){
if(in_array($fileExtensions,$allowedExtension)){
if($fileSize > $size){
$load_error = 2;
return false;
}else{
//نقوم بتغيير اسم الملف وحفضه في المجلد
$location = $folder."/".$fileName;
$location_new = $folder."/".$text.'.'.$fileExtensions;
move_uploaded_file($fileTmp,$location);
rename($location,$location_new);
return $location_new;
}
}else{
$load_error = 1;
return false;
}
}else{
$load_error = 0;
return false;
}
}
if($audio_url = _file('audio',['webm','png'],1000*1000*5,'upload')) {
$arr['aud'] = true;
$arr['url'] = $audio_url;
}else{
$errors[] = 'لا يوجد ملف ';
$errors[] = 'الملف غير مدعوم';
$errors[] = 'حجم الملف كبير';
$arr['aud'] = false;
$arr['error'] = $errors[$load_error];
}

echo json_encode($arr);

?>

Hessen Nasser · 19 يوليو 2023

وعليكم السلام ورحمة الله وبركاته،

تبدو أن الكود جيد بشكل عام، ولكن هناك بعض الأمور التي يمكن تحسينها لحل المشكلة التي واجهتها. سأقدم لك التعديلات اللازمة:

المشكلة الأساسية: المشكلة الأساسية التي تجعل الملف لا يحتوي على صوت عند التشغيل هي استخدام امتداد "webm" للصوت. على الرغم من أن هذا الامتداد مدعوم بواسطة العديد من المتصفحات، فإنه قد يكون غير مدعوم بعض الشيء على متصفحك. لذلك، سنستخدم امتداد "wav" بدلاً من "webm"، حيث أن "wav" هو امتداد صوت مشهور ومدعوم جيدًا.
تحسين الأمان: في ملف "audio.php"، لاحظت أنه يتم قبول الملفات بامتداد "png" أيضًا، وهذا غير ضروري لعملية التسجيل الصوتي. من الأفضل أن نقوم بتحديد امتداد "wav" فقط للملفات الصوتية.

الآن، سنقوم بتعديل الكود لحل هذه المشكلة وتحسين الأمان:

ملف audio.html:

<!DOCTYPE html>
<html>
<body>
  <button onclick="startRecording();">تسجيل صوتي</button>
  <button onclick="stopRecording();">إيقاف التسجيل</button>
  <br>
  <a id="downloadLink" style="display:none;"></a>
  <br>
  <audio style="display:none" id="audioElement" controls="controls" src=""></audio>

  <script>
    let audioChunks = [];
    let mediaRecorder = null;
    let audioBlob = null;
    let audioUrl = null;

    function startRecording() {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          mediaRecorder = new MediaRecorder(stream);
          mediaRecorder.start();
          mediaRecorder.addEventListener("dataavailable", event => {
            audioChunks.push(event.data);
          });
        });
    }

    function stopRecording() {
      mediaRecorder.addEventListener("stop", () => {
        audioBlob = new Blob(audioChunks, { type: "audio/wav" });
        audioUrl = URL.createObjectURL(audioBlob);

        let audioElement = document.getElementById("audioElement");
        audioElement.src = audioUrl;
        audioElement.style.display = 'block';

        let downloadLink = document.getElementById("downloadLink");
        downloadLink.href = audioUrl;
        downloadLink.download = "recording.wav";
        downloadLink.innerText = 'اضغط هنا لحفظ الملف';

        uploadAudio();
      });

      mediaRecorder.stop();
    }

    function uploadAudio() {
      var formData = new FormData();
      formData.append("audio", audioBlob, "recording.wav");

      fetch("audio.php", {
        method: "POST",
        body: formData
      })
        .then(response => response.json())
        .then(data => {
          if (data.aud) {
            alert(data.url);
          } else {
            alert(data.error);
          }
        })
        .catch(error => {
          console.error("حدث خطأ أثناء رفع الصوت", error);
        });
    }
  </script>
</body>
</html>

ملف audio.php:

<?php
function _file($file, $allowedExtension, $size, $folder)
{
    global $load_error;
    $rand = array('A', 'a', 'B', 'b', 'C', 'c', 'D', 'b', 'E', 'e', 'F', 'f', 'G', 'g', 'J', 'j', 'K', 'k', 'L', 'l', 'H', 'h', 'S', 's', 'V', 'v', 'T', 't', 'Q', 'q', 'W', 'w', 'Y', 'y', 'U', 'u', 'I', 'i', 'O', 'o', 'P', 'p', 'X', 'x', 'N', 'n', 'M', 'm', 'R', 'r', 'Z', 'z');
    $text = '';
    for ($i = 0; $i < rand(10, 20); $i++) {
        $text = $text . $rand[rand(0, 51)];
    }
    $fileName = $_FILES[$file]['name'];
    $fileSize = $_FILES[$file]['size'];
    $fileTmp  = $_FILES[$file]['tmp_name'];
    $fileType = $_FILES[$file]['type'];
    $fileExtensions = end(explode('.', $fileName));
    if (isset($fileName) and $fileName != '') {
        if (in_array($fileExtensions, $allowedExtension)) {
            if ($fileSize > $size) {
                $load_error = 2;
                return false;
            } else {
                //نقوم بتغيير اسم الملف وحفضه في المجلد
                $location = $folder . "/" . $fileName;
                $location_new = $folder . "/" . $text . '.' . $fileExtensions;
                move_uploaded_file($fileTmp, $location);
                rename($location, $location_new);
                return $location_new;
            }
        } else {
            $load_error = 1;
            return false;
        }
    } else {
        $load_error = 0;
        return false;
    }
}

if ($audio_url = _file('audio', ['wav'], 1000 * 1000 * 5, 'upload')) {
    $arr['aud'] = true;
    $arr['url'] = $audio_url;
} else {
    $errors[] = 'لا يوجد ملف ';
    $errors[] = 'الملف غير مدعوم';
    $errors[] = 'حجم الملف كبير';
    $arr['aud'] = false;
    $arr['error'] = $errors[$load_error];
}

echo json_encode($arr);
?>

بعد التعديلات، يجب أن يتم تسجيل الصوت بامتداد "wav" ويرفع للسيرفر، وعند تشغيل الملف ستجد الصوت موجودًا ويمكن سماعه بشكل صحيح. كما قمنا بتحسين الأمان للسماح فقط بامتداد "wav" للملفات الصوتية.

Mustafa Suleiman · 20 يوليو 2023

أنت نستخدم نوع ملف webm، ,وليس هناك دعم من متصفح الويب لصيغة ملف webm، حيث أن الصيغ المدعومة في عنصر audio هي MP3, WAV, و OGG.

أي حاول تسجيل الصوت باستخدام صيغة ملف مدعومة على جهاز الكمبيوتر الخاص بك (مثل wav أو ogg)، وتحديث الكود على النحو التالي:

في ملف audio.html، غيِّر نوع الصيغة في عنصر <audio> إلى صيغة ملف مدعومة، مثل wav أو ogg:

<audio style="display:none" id="audi" controls="controls" src="" type="audio/wav"></audio>

وفي ملف audio.php، غيِّر المصفوفة $allowedExtension لتشمل الصيغة التي تم اختيارها في الملف audio.html:

if ($audio_url = _file('audio', ['wav', 'ogg'], 1000 * 1000 * 5, 'upload')) {
    // ...
}

وفي حال كنت ترغب في دعم صيغ أخرى للملفات الصوتية، فتستطيع إضافتها إلى المصفوفة $allowedExtension في ملف audio.php.

كيف احل مشكلة فقدان الصوت بعد تسجيله وارساله للسيرفر

السؤال

علي الكاسر

2 أجوبة على هذا السؤال

Recommended Posts

Hessen Nasser

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية