Воспроизвести mp3-файл, используя JavaScript - PullRequest
Новая
       7

Воспроизвести mp3-файл, используя JavaScript

9 голосов
/ 16 февраля 2012

Какой самый лучший и кроссбраузерный способ воспроизведения mp3 (очень короткого) файла через javascript? Я пробовал разные способы, но всегда есть проблема ...

РЕДАКТИРОВАТЬ 1:

Мне не нужен «полный» плеер, мне просто нужна функция, которую я могу вызывать каждый раз, когда что-то происходит

РЕДАКТИРОВАТЬ 2:

Хорошо, я должен лучше объяснить мою проблему. Сервер представляет собой смартфон, подключенный к локальной сети, но не всегда к Интернету. Я хочу использовать mp3, потому что файл весит всего 3 КБ (вместо 60 КБ wav), но если механизм воспроизведения этого файла слишком «тяжелый» (проигрыватель или jquery.js), я думаю, лучше использовать файл wav. Другие предложения?

Ответы [ 2 ]

16 голосов
/ 11 января 2015

Используйте это: 

new Audio('your/url/here').play()

Документацию для этого (HTMLAudioElement) можно найти в MDN, обратите внимание, что большинство элементов управления наследуется HTMLMediaElement.

5 голосов
/ 16 февраля 2012

Загрузка страницы с помощью прямой загрузки в аудиофайл. Определите, поддерживает ли браузер MP3. Если это так, постепенно улучшайте прямую загрузку в тег AUDIO. Вот образец: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Audio demo</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
</head>
<body>
    <p id="audio">
        <a href="BadAppleEnglish.mp3">Listen &raquo;</a>        
    </p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script src="audio.js"></script>
</body>
</html>

И Javascript: 

$(function () {
var audioElement = $('#audio'),
    href = audioElement.children('a').attr('href');
$.template('audioTemplate', '<audio src="${src}" controls>');
if (Modernizr.audio.mp3) {
    audioElement.empty();
    $.tmpl('audioTemplate', {src: href}).appendTo(audioElement);
}
});

Я бы предположил, что большинство из множества встроенных плагинов для воспроизведения MP3 работают следующим образом.

UPDATE:

Поскольку вы отредактировали вопрос, чтобы указать, что вы предпочитаете решение, не использующее jQuery, я укажу, что переписать его, чтобы не использовать jQuery, тривиально. Это просто дольше и менее элегантно. Помните, что библиотеки Javascript, загружаемые из CDN, обычно кэшируются браузером.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...