Javascript-форум - Воспроизведение аудио

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Воспроизведение аудио (https://javascript.ru/forum/events/40593-vosproizvedenie-audio.html)

Воспроизведение аудио

Что нужно изменить в коде на этой странице, чтобы воспроизводился не тот файл, который вписывается в текстовую форму, а автоматически выбирался браузером по принципу:

<audio id="myaudio">
<source src ="demo.ogg" type="audio/ogg">
<source src ="demo.mp3" type="audio/mpeg">
HTML5 audio not supported
</audio>

Текстовую форму при этом нужно убрать. Спасибо.

(HTML5 AUDIO API):

var sound = document.getElementById("myaudio")[0];
sound.play();

Не то?

Вроде сам разобрался.

// Функция Play
function Play() {
var audioElm = document.getElementById("myaudio");
document.getElementById("img1");
audioElm.play('myaudio'); }

// Функция Stop
function Stop() {
var audioElm = document.getElementById("myaudio");
document.getElementById("img2");
audioElm.pause('myaudio');
audioElm.currentTime = 0; }

// Функция Forward +30 sec.
function Forward() {
var audioElm = document.getElementById("myaudio");
document.getElementById("img3");
audioElm.currentTime += 30.0; }

Результат можно посмотреть здесь, где катушечный магнитофон.

Так магнитофон же на flash написан!
И, кстати, чем это отличается от моего варианта?

Магнитофон состоит из одного статичного png и двух анимированных gif, кнопки тоже png, я их сам рисовал в обычном и нажатом состоянии. Никакого флэш, все команды на JavaScript. Если интересно, могу полный код выслать, хотя сами можете скачать страницу и посмотреть. От вашего варианта наверное мало отличается. Проблема была в назначении команд Java на определённые кнопки и в отсутствии опыта.

Ой, не на той магнитофон нажимал.

Верхняя чёрная дека - это флэш. У меня есть ещё вопросы. Хочу сделать аналогичный аппарат на js тоже со своими кнопками. Только там будет задача посложнее. Есть три группы mp3 файлов, которые надо будет воспроизводить в цикле, как во флэш. Т.е. должен быть кнопочный переключатель верхнего уровня, который переключает 3 группы файлов, и такой-же нижнего уровня, он переключает уже сами файлы. Но пока всё неконкретно. Когда появятся мысли, отпишусь.

Какой атрибут вместо href (см. document.getElementById('text_songs').setAttribute ('href',songs[current]) нужно задать в коде страницы, чтобы вместо ссылки на mp3 файл вызвать функцию:
function Play() {
var audioElm = document.getElementById("text_songs");
document.getElementById("img1"); // Кнопка Play
audioElm.play('text_songs'); }

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Плеер</title>
<script type="text/javascript">
var songs=new Array("demo1.mp3","demo2.mp3","demo3.mp3");
var all_text=new Array("text_1","text_2","text_3");
var current=0;

function change(direction) {
current+=direction;
if (current>all_text.length-1) current=0;
if (current<0) current=all_text.length-1;
document.getElementById('text_songs').setAttribute ('href',songs[current]);
if (document.layers) {
document.layers.text.document.write(all_text[current]);
document.layers.text.document.close();
}
else text.innerHTML=all_text[current];
}
</script>

</head>

<body>

<table border="1" width="20%" cellspacing="0" cellpadding="0">
<tr>
<td>
<span id="text">text_1<span>
</td>
</tr>
</table>

<a href="#" onclick="change(-1);">Назад</a>     
<a href="demo1.mp3" id="text_songs">Перейти</a>     
<a href="#" onclick="change(1);">Вперёд</a>

</body>

</html>

Советую добавить id к елменту и в коде js написать id.onclick = function(){} или id.onclick = название функции без круглих дужек
вместо 'id' надо написать id елемента