Question

我有两个变量：contentSource和selectedValue。我想单击按钮Get Audio，它将获得两个变量的值并插入audio元素。获得音频成功后，元素audio将会出现。

音频元素的结构如下： selectedValue＆安培; IID = translator.5034.2＆安培;文本= contentSource

我的示例代码如下所示：

<script>
	function getContentTranslate() {
		var contentSource = document.getElementById('langSource').value;
		var selectedValue = document.getElementById("langSelect").value;
    
	}
</script>

 <select id="langSelect">
  <option value="en">English</option>
  <option value="vi">Vietnamese</option>
</select> <br>
<textarea id="langSource" placeholder="Enter text or webpage URL here" maxlength="5001" aria-label="Text to be translated"style="background: transparent none repeat scroll 0% 0% !important; z-index: auto; position: relative; line-height: 48px; font-size: 40px; transition: none 0s ease 0s;"></textarea> <br>
<button onclick="getContentTranslate()">GET AUDIO</button> <br>

<audio controls autoplay>
  <source src="https://www.bing.com/tspeak?&format=audio%2Fmp3&language=en&IG=D2CBB80AA6824D9A91B0A5D1074FC4A1&IID=translator.5034.2&text=This is the content" type="audio/mpeg">
</audio>

Answer 1

这很有效。试试吧:) Codepen：https://codepen.io/anon/pen/pVVYOV

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function getContentTranslate() {
            var contentSource = document.getElementById('langSource').value;
            var selectedValue = document.getElementById("langSelect").value;

                var sound      = document.getElementById("audio-player") || document.createElement('audio');
                sound.id       = 'audio-player';
                sound.controls = 'controls';
                sound.src      = 'https://www.bing.com/tspeak?&format=audio%2Fmp3&language='+selectedValue+'&IID=translator.5034.2&text='+contentSource;
                sound.type     = 'audio/mpeg';
                document.getElementById("audio-player") || document.getElementById('song').appendChild(sound);

        }
    </script>
     <select id="langSelect">
      <option value="en">English</option>
      <option value="vi">Vietnamese</option>
    </select> <br>
    <textarea id="langSource" placeholder="Enter text or webpage URL here" maxlength="5001" aria-label="Text to be translated"style="background: transparent none repeat scroll 0% 0% !important; z-index: auto; position: relative; line-height: 48px; font-size: 40px; transition: none 0s ease 0s;"></textarea> <br>
    <button onclick="getContentTranslate()">GET AUDIO</button> <br>
<div id='song'></div>
</body>
</html>

Answer 2

我将如何做到这一点：

＆＃13;

// When the DOM (basically the HTML) is loaded
document.addEventListener('DOMContentLoaded', function(){
    // Define your DOM elements
    var getAudioBtn = document.getElementById('getAudioBtn'),
        langSelect = document.getElementById("langSelect"),
        langSource = document.getElementById("langSource"),
        audioEl = document.getElementById('audioEl');

    // Setup an event listener on the button
    getAudioBtn.addEventListener('click', getContentTranslate);

    // Declare your function
    function getContentTranslate() {
        // Get the values
        var text = langSource.value,
            language = langSelect.value;
        // Encode your values for use in a URL query String
        var url = 'https://www.bing.com/tspeak?&format=audio%2Fmp3'
                + '&language=' + encodeURIComponent(language)
                + '&IG=D2CBB80AA6824D9A91B0A5D1074FC4A1&IID=translator.5034.2'
                + '&text=' + encodeURIComponent(text);
        // Set the URL as source for the audio element
        audioEl.setAttribute('src', url);
    }
});

＆＃13;

<select id="langSelect">
  <option value="en">English</option>
  <option value="vi">Vietnamese</option>
</select>
<br>
<textarea id="langSource" placeholder="Enter text or webpage URL here">Don't worry, be happy!</textarea>
<br>
<button id="getAudioBtn">GET AUDIO</button>
<br>
<audio id="audioEl" autoplay controls></audio>

＆＃13;

如何插入元素的变量并在Javascript中单击按钮后显示它？

2 个答案: