openai-workshop/step6.html at main · Jakevin/openai-workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
	<title>OpenAI Web Project</title>
</head>
<body>
	<h1>OpenAI gpt-3 Text-to-Speech Project</h1>

	<p>OpenAI API Key:</p>
    <input type="text" id="apiKey" value="">
    <br><br>
    <audio id='player' controls src="audioSRC"></audio>

	<p>Voice Content:</p>
    <textarea type="text" id="content"></textarea>
    <br><br>
    <p>Speaker</p>
    <select id="speaker">
        <option value="alloy">Alloy</option>
        <option value="echo">Echo</option>
        <option value="fable">Fable</option>
        <option value="onyx">Onyx</option>
        <option value="nova">Nova</option>
        <option value="shimmer">Shimmer</option>
    </select>
    <br><br>
	<button onclick="generateVoice()">Speech</button>
	<script>

        let API_KEY = "";

        let mediaRecorder;
		let recordedChunks = [];

		async function generateVoice() {
            API_KEY = document.getElementById("apiKey").value;
			const prompt = document.getElementById("content").value;
            const speaker = document.getElementById("speaker").value;
            try {
                const response = await fetch(`https://api.openai.com/v1/audio/speech`,
                    {
                        body: JSON.stringify({
                                "model": "tts-1",
                                "input": prompt,
                                "voice": speaker
                            }),
                        method: "POST",
                        headers: {
                            "content-type": "application/json",
                            Authorization: `Bearer ${API_KEY}`,
                        },
                    }
                )

                const audioElement = document.querySelector('audio');

                const reader = new FileReader();
                reader.onloadend = async () => {
                    audioElement.src = reader.result;
                    audioElement.load()

                    //Avoid the Promise Error
                    setTimeout(function () {
                        audioElement.play()
                    }, 150);

                }
                reader.readAsDataURL(await response.blob());

            } catch(error) {
                console.log(`Error: ${error}`);
            }

		}
	</script>
</body>
</html>